最近使用 vue 需要实现一个点餐选择商品规格的页面, 需要通过 vue 动态的给被点击的元素添加 class 名字, 使其变色, 其他的删除 class. 如图:
开始在网上找了许多办法发现不是太好用, 最后找到一个发现还是不错的, 记录一下
- html: <div class = "weui-mask"id = "guige" > <div class = "guigeBox" > <p class = "guigeTitle" > {
- {
- guigeName
- }
- } < /p>
- <p class="guigeP guigeP01"> 规格 </p > <div class = "indexGuiGe" > <span v -
- for = "value,index in guigeList"v - on: click = "guige(index)"v - bind: class = "{on:index==guigeSpan}" > {
- {
- value.guige_name
- }
- } < /span>
- </div > <p class = "guigeP" > 口味 < /p>
- <div class="indexKouwie">
- <span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span > </div>
- </div > </div>
- script:
- var guige=new Vue({
- el: '#guige',
- data:{
- guigeSpan:"-1", / / 控制点亮状态 - 1为默认不点亮kouweiSpan: "-1",
- // 控制点亮状态
- },
- methods: {
- guige: function(index) { // 当点击时候点亮, 同级的 span 标签删除 Class
- this.guigeSpan = index;
- },
- kouwei: function(index) {
- this.kouweiSpan = index;
- },
- }
- })
总结
以上所述是小编给大家介绍的 vue.js 实现点击后动态添加 class 及删除同级 class, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/137713.htm