Vue实现对点击的列表＜li＞添加class样例

最新推荐文章于 2023-05-19 15:56:17 发布

0918L

最新推荐文章于 2023-05-19 15:56:17 发布

阅读量967

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/L00918/article/details/117323251

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue实现的技巧，当点击列表li元素时，动态添加class。通过设置变量type并将其在点击事件中更新为当前元素的索引，从而实现特定li的样式生效。

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

实现思路：

设置一个变量 type，然后写成:class="{active:index === type}"，然后click的时候，传入index,把type变量的值赋值为index；这样this.type=index,index==‘index’ 返回true，所以class样例生效

	<ul>
       <li  v-for="(item,index) in params" @click="meClick(index)" :class="{active:index === type}" >{{item}}</li>
    </ul>

具体代码如下：

<style>
    .active {
        color: red;
    }
</style>

<body>
    <div id="test">
        <ul>
            <li  v-for="(item,index) in params" @click="meClick(index)" :class="{active:index === type}" >{{item}}</li>
        </ul>
    </div>
</body>

<script src="../js/vue.js"></script>
<script>
    const test= new Vue({
        el: "#test",
        data: {
            params: ['张三', '李四', '王五', '赵六'],
            type: -1
        },
        methods: {
            myClick: function (index) {
                this.type= index
            }
        }
    })
</script>