vue如何实现点击当前增加class-创新互联

小编给大家分享一下vue如何实现点击当前增加class，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司专注于武汉网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供武汉营销型网站建设，武汉网站制作、武汉网页设计、武汉网站官网定制、微信小程序服务，打造武汉网络公司原创品牌,更为您提供武汉网站排名全网营销落地服务。

如下所示：

<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”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站名称：vue如何实现点击当前增加class-创新互联
文章分享：https://www.cdcxhl.com/article14/dsccde.html

成都网站建设公司_创新互联，为您提供网站内链、服务器托管、关键词优化、虚拟主机、ChatGPT、用户体验

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容