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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
jquery实现图片轮播器
May 23 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
js实现开关灯效果
Mar 30 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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 Socket 编程
2010/04/09 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
基于Python开发chrome插件的方法分析
2018/07/07 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
店面销售职位的职责
2014/03/09 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js