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 相关文章推荐
列表内容的选择
Jun 30 Javascript
[转]JS宝典学习笔记
Feb 07 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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木马攻击防御之道
2008/03/24 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JS event使用方法详解
2008/04/28 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue实现文字加密功能
2019/09/27 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
简单介绍Python中的JSON模块
2015/04/08 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python元组知识点总结
2019/02/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python安装requests库的实例代码
2019/06/25 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
学生自我鉴定范文
2013/10/04 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
给医院的感谢信
2015/01/21 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
电影雷锋观后感
2015/06/10 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python