vue.js实现点击后动态添加class及删除同级class的实现代码


Posted in Javascript onApril 04, 2018

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

vue.js实现点击后动态添加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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
轻松搞定js表单验证
Oct 13 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
原生JS实现分页
Apr 19 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
Vue filter介绍及详细使用
Apr 04 #Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 #Javascript
详解如何用babel转换es6的class语法
Apr 03 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python操作json的方法实例分析
2018/12/06 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
如何进行Linux分区优化
2013/02/12 面试题
文秘专业大学生求职信
2013/11/10 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Golang ort 中的sortInts 方法
2022/04/24 Golang