vue.js实现点击后动态添加class及删除同级class
2021-05-18 01:30
标签：点餐 color es2017 bind ima for cti click span 最近使用vue需要实现一个点餐选择商品规格的页面，需要通过vue动态的给被点击的元素添加class名字，使其变色，其他的删除class。如图： 开始在网上找了许多办法发现不是太好用，最后找到一个发现还是不错的，记录一下 html： script: 参考：http://blog.csdn.net/xiao_yu_liu/article/details/55515244 vue.js实现点击后动态添加class及删除同级class 标签：点餐 color es2017 bind ima for cti click span 原文地址：http://www.cnblogs.com/yzy1/p/7740208.html
1 div class="weui-mask" id="guige">
2 div class="guigeBox">
3 p class="guigeTitle">{{guigeName}}p>
4 p class="guigeP guigeP01">规格p>
5 div class="indexGuiGe">
6 span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}span>
7 div>
8 p class="guigeP">口味p>
9 div class="indexKouwie">
10 span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}span>
11 div>
15 div>
16 div>
1 var guige=new Vue({
2 el: ‘#guige‘,
3 data:{
4 guigeSpan:"-1", //控制点亮状态 -1为默认不点亮
5 kouweiSpan:"-1", //控制点亮状态
6 },
7 methods:{
8 guige:function(index){ //当点击时候点亮，同级的span标签删除Class
9 this.guigeSpan = index;
10 },
11 kouwei:function(index){
12 this.kouweiSpan = index;
13 },
14 }
15 })
文章标题：vue.js实现点击后动态添加class及删除同级class
文章链接：http://soscw.com/index.php/essay/86979.html