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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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针对JSON操作实例分析
2015/01/12 PHP
smarty内置函数section的用法
2015/01/22 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP的自定义模板引擎
2017/03/24 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python中的类与类型示例详解
2019/07/10 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
pytorch简介
2020/11/11 Python
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
大学奖学金获奖感言
2014/08/15 职场文书
golang特有程序结构入门教程
2021/06/02 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS