《前端》vue实现tab栏点击高亮效果-2020年9月22日_基于数据,动态渲染tab点击高亮(v-for)-CSDN博客

本文详细介绍了如何使用Vue.js实现列表项点击后高亮显示的效果。通过v-for循环渲染数组，利用@click事件和:class绑定来切换div的样式，实现当前选中项的视觉突出。示例代码展示了完整的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心知识点：

v-for循环渲染arr，并把当前点击的name通过selected传给data里的active 。

判断如果active的值与当前点击的name相同则给当前点击的div加上active样式
@click=selected(item.name) :class="{active:active == item.name}">

注意：样式前面有冒号，需要绑定的。

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue点击高亮</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <style>
        .active {
            background-color: orange;
            color: white;
        }
        #box {
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="main">
        <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>
    </div>
    <script>
        var demo = new Vue({
            el: '#main',
            data: {
                arr: [{
                    name: "娃哈哈"}, {
                    name: "椰子汁"}, {
                    name: "柠檬茶"}, {
                    name: "可乐"}, {
                    name: "雪碧"}],
                active: "娃哈哈",
            },
            methods: {
                selected(name) {
                    this.active = name
                    console.log(name)
                }
            }
        });
    </script>
</body>
</html>

其他人做法：

vue实现点击当前标签高亮效果【推荐】_vue.js_脚本之家 https://www.jb51.net/article/142444.htm