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 相关文章推荐
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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多维数组的方法示例
2017/06/08 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python编程求质数实例代码
2018/01/31 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python3实现微型的web服务器
2019/09/03 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
大二学习计划书范文
2014/04/27 职场文书
政协调研汇报材料
2014/08/15 职场文书
服务员岗位职责
2015/02/03 职场文书
青岛导游词
2015/02/12 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers