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 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JavaScript手机振动API
Jun 11 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
Vue下的国际化处理方法
Dec 18 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
javascript中闭包closure的深入讲解
Mar 03 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获取毫秒级时间戳的方法
2015/04/15 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python常见的格式化输出小结
2016/12/15 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python 项目转化为so文件实例
2019/12/23 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
初一新生军训方案
2014/05/22 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
使用Python开发冰球小游戏
2022/04/30 Python