vue.js实现点击后动态添加class及删除同级class
最近使用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;
},
}
})
参考:http://blog.csdn.net/xiao_yu_liu/article/details/55515244
vue.js实现点击后动态添加class及删除同级class的更多相关文章
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- vue中v-bind:class动态添加class
1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...
- 【实践】js 如何实现动态添加文本节点
对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...
- 开源干货!!!.NET Core + JWT令牌认证 + Vue.js(iview-admin) 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦!!!
DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
随机推荐
- python 装饰器 第五步(2):带有返回值得装饰器
#第五步:带有返回值的装饰器 把第四步复制过来 #用于扩展基本函数的函数 def kuozhan(func): #内部函数(扩展之后的eat函数) def neweat(): #以下三步就是扩展之后的 ...
- 3.jmeter jsr232 脚本获取当前测试的正在活动的线程数
jsr232 groovy 脚本获取当前测试的正在活动的线程数 (需要选择 groovy类型, 如果使用beanshell或者javascript,请根据其语法稍作修改即可) import org.a ...
- Visual Assist 10.9.2248 破解版(支持VS2017) 转载
自己在Windows10下同时安装了VS2017和VS2013,先装的VS2017和Visual Assist,后装的VS2013,发现VS2013中没显示Visual Assist,Google了一 ...
- 插件化框架解读之android系统服务实现原理(五)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 一.系统服务提供方式 1.我们平时最常见的系统服务使用方式 Wi ...
- maven私服的项目使用配置
环境: eclipse .maven.nexus. 1.配置setting.xml文件 1.1.配置本地仓库位置:文件中,存在节点 “localRepository”,默认是注释,也就是本地仓库使用 ...
- java并发编程之美-阅读记录5
java并发包中的并发List 5.1CopeOnWriteArrayList 并发包中的并发List只有CopyOnWriteArrayList,该类是一个线程安全的arraylist,对其进行的修 ...
- 2018-8-10-win10-UWP-用Path画图
title author date CreateTime categories win10 UWP 用Path画图 lindexi 2018-08-10 19:16:50 +0800 2018-2-1 ...
- sqlacodegen:通过mysql语句生成sqlalchemy的model
引用网页描述:这个工具读取现有数据库的结构并生成相应的SQLAlchemy模型代码. 使用方法详细描述在如下连接中. 先简要介绍使用方法: 安装:pip install sqlacodegen sq ...
- linux起源及centos安装
第1章 Linux介绍 1.1 什么是操作系统 是一个人与计算机硬件的中介 Linux:内核+shell+扩展软件 操作系统,英文名称Operating System,简称OS,是计算机系统中必不可 ...
- Pandas之loc\iloc\ix
---------------------------------------------------------------------------------------------------- ...