vue.js点击编辑class

企鹅博客
企鹅博客
企鹅博客
29452
文章
0
评论
2020年9月16日06:45:38 评论 4 views 966字阅读3分13秒

这次给大家带来vue.js点击编辑class,vue.js点击编辑class的注意事项有哪些,下面就是实战案例,一起来看一下。

最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。如图:

vue.js点击编辑class

开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下

html:

<p class="weui-mask" id="guige">
    <p class="guigeBox">
     <p class="guigeTitle">{{guigeName}}</p>
     <p class="guigeP guigeP01">规格</p>
     <p class="indexGuiGe">
      <span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span>
     </p>
     <p class="guigeP">口味</p>
     <p class="indexKouwie">
      <span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span>
     </p>
    </p>
   </p>

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;
     },
    }
   })

相信看了本文案例你已经掌握了方法,更多精彩请关注php教程其它相关文章!

推荐阅读:

如何对react+redux进行使用

JS 判断页面滚动条

以上就是vue.js点击编辑class的详细内容,更多请关注php教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: