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编程起步(第三课)
Feb 27 Javascript
javascript之bind使用介绍
Oct 09 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
微信小程序实现左滑删除效果
Nov 18 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中显示格式化的用户输入
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php树型类实例
2014/12/05 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js常用代码段收集
2011/10/28 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python实现图片转字符画的示例
2017/08/22 Python
用Python实现KNN分类算法
2017/12/22 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python异常处理try except过程解析
2020/02/03 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
善意的谎言事例
2014/02/15 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
营销与策划专业求职信
2014/06/20 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python