Vue中如何实现点击Tab栏后长尾词的高亮显示效果？

本文共计475个文字，预计阅读时间需要2分钟。

原文：本文实例为大家分享了tab栏实现点击高亮，并提供大量参考，整体内容如下：+ 前面面试的时候被问到过如何使用vue实现tab栏切换高亮，今天自己写demo顺便记录一下。+ vue官方文档里有一个基础知识点。”

改写后：本文通过实例展示了如何使用tab栏实现点击高亮效果，并提供了丰富参考。内容概述如下：+ 面试时曾被询问如何利用vue实现tab栏的切换高亮。今天，我在编写demo的同时，记录了这一过程。+ 在vue官方文档中，我们可以找到一个相关的基础知识点。

本文实例为大家分享了tab栏实现点击高亮，供大家参考，具体内容如下

之前面试的时候被问到过如何使用vue实现tab栏切换高亮，今天自己写demo顺便记录一下

vue官方文档里有一个基础知识点叫做对象语法

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> //data如下 data: { isActive: true, hasError: false } //渲染结果为 <div class="static active"></div>

个人觉得类似三元表达式，如果值为true则给该元素添加上指定的class

实际代码如下

<template> <div> <!-- v-for循环渲染arr --> <!-- 把当前点击的name通过selected传给data里的active --> <!-- 判断如果active的值与当前点击的name相同 则给当前点击的div加上active样式 --> <div id="box" v-for="(item,index) in arr" :key="index" @click = selected(item.name) :class="{active:active == item.name}" > {{item.name}} </div> </div> </template> <script> export default { name: "index", data() { return { arr: [ { name: "娃哈哈" }, { name: "椰子汁" }, { name: "柠檬茶" }, { name: "可乐" }, { name: "雪碧" } ], active: "娃哈哈" }; }, methods: { selected(name){ this.active = name console.log(name) } } }; </script> <style> .active { background-color: orange; color: white; } #box { width: 100px; height: 100px; margin: 10px; float: left; border: 1px solid #000; } </style>

我是前端萌新一枚，刚接触前端没多久，vue接触时间就更短了，每天进步一点点！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。