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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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常用代码大全(新手入门必备)
2010/06/29 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js切换光标示例代码
2013/10/10 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python 错误和异常小结
2013/10/09 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
一个超级简单的python web程序
2014/09/11 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python自动12306抢票软件实现代码
2018/02/24 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
浅析python中while循环和for循环
2019/11/19 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
高中运动会广播稿
2014/09/16 职场文书
碧霞祠导游词
2015/02/09 职场文书
地震慰问信
2015/02/14 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby