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 DOM的学习笔记
Dec 22 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
详解Vue组件之间通信的七种方式
Apr 14 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
文件上传的实现
2006/10/09 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python ip正则式
2009/05/07 Python
python导入时小括号大作用
2017/01/10 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
青年安全生产示范岗事迹材料
2014/05/04 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
党支部对转正的意见
2015/06/02 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
JavaScript实现登录窗体
2021/06/22 Javascript