网络编程 
首页 > 网络编程 > 浏览文章

vue--点击当前增加class,其他删除class的方法

(编辑:jimmy 日期: 2024/5/20 浏览:3 次 )

如下所示:

<div id="app">
<p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p>
</div>
 
<script>
new Vue({
el: '#app',
data: {
datas: {
data1: {
data: "测试1",
ifAdd: 0
},
data2: {
data: "测试2",
ifAdd: 1
},
data3: {
data: "测试3",
ifAdd: 2
}
},
qwerqwre:"0"
},
 
 
methods: {
addClassFun: function(index) {
this.qwerqwre = index;
}
}
})
</script>

以上这篇vue--点击当前增加class,其他删除class的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:vue 监听某个div垂直滚动条下拉到底部的方法
下一篇:vue-cli 使用vue-bus来全局控制的实例讲解
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网