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求平均值的小例子
Nov 29 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
解决layui表格的表头不滚动的问题
Sep 04 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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/09 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python的动态重新封装的教程
2015/04/11 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python实现注册登录系统
2017/08/08 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python制作词云的方法
2018/01/03 Python
Python中作用域的深入讲解
2018/12/10 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
实习单位评语
2014/04/26 职场文书
大学生心理活动总结
2014/07/04 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python
Python如何使用循环结构和分支结构
2022/04/13 Python