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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
实现高性能javascript的注意事项
May 27 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php读取纯真ip数据库使用示例
2014/01/26 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Python GUI布局尺寸适配方法
2018/10/11 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python安装本地whl的实例步骤
2019/10/12 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
django rest framework使用django-filter用法
2020/07/15 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
教师求职推荐信范文
2013/11/20 职场文书
怀念母亲教学反思
2014/04/28 职场文书
党员转正申请报告
2015/05/15 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python