vue--点击当前增加class,其他删除class的方法


Posted in Javascript onSeptember 15, 2018

如下所示:

<div id="app">
<p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p>
</div>
 
<script>
new Vue({
el: '#app',
data: {
datas: {
data1: {
data: "测试1",
ifAdd: 0
},
data2: {
data: "测试2",
ifAdd: 1
},
data3: {
data: "测试3",
ifAdd: 2
}
},
qwerqwre:"0"
},
 
 
methods: {
addClassFun: function(index) {
this.qwerqwre = index;
}
}
})
</script>

以上这篇vue--点击当前增加class,其他删除class的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
javascript控制台详解
Jun 25 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
js验证密码强度解析
Mar 18 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
You might like
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python反射的用法实例分析
2018/02/11 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
南京青奥会口号
2014/06/12 职场文书
安全施工责任书
2014/08/25 职场文书
公司停电通知
2015/04/15 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
MySQL开启事务的方式
2021/06/26 MySQL