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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
Javascript之datagrid查询详解
Sep 15 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php的debug相关函数用法示例
2016/07/11 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
javascript时间函数大全
2014/06/30 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python 删除非空文件夹的实例
2018/04/26 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
社区国庆节活动方案
2014/02/05 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
golang定时器
2022/04/14 Golang