vue2.0中click点击当前li实现动态切换class


Posted in Javascript onJune 21, 2017

1,文件内容

----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法。  看详解:https://cn.vuejs.org/v2/api/#Vue-set

<template>
<div>


<ul>



<li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class="{'active':item.active,'unactive':!item.active}" >



{{item.select}} 



<span class="icon" v-show="item.active">当我是图标</span>



</li>


</ul>

</div>
</template>

<script>


import Vue from 'vue'


export default{


data(){



return {




active: false,




items: [





{select:'第一行'},





{select:'第二行'},





{select:'第三行'},





{select:'第四行'}




]



}


},



methods: {


selectStyle (item, index) {



this.$nextTick(function () {




this.items.forEach(function (item) {





Vue.set(item,'active',false);




});




Vue.set(item,'active',true);



});


}

}
 }
</script>

<!-- 样式 -->
<style>

.active{


color:red;

}

.unactive{


color:#000;

}

.icon{


float: right;


font-size:12px;

}


</style>

2,效果

vue2.0中click点击当前li实现动态切换class

vue2.0中click点击当前li实现动态切换class

vue2.0中click点击当前li实现动态切换class

vue2.0中click点击当前li实现动态切换class

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
node.js express框架简介与实现
Jul 23 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
详解vue-cli中配置sass
Jun 21 #Javascript
详解如何在vue中使用sass
Jun 21 #Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 #Javascript
JS图片预加载插件详解
Jun 21 #Javascript
You might like
php实现session自定义会话处理器的方法
2015/01/27 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
基于Jquery实现键盘按键监听
2014/05/11 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
用Python解决x的n次方问题
2019/02/08 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python Web版语音合成实例详解
2019/07/16 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python 模块导入问题汇总
2021/02/01 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
C++:局部变量能否和全局变量重名
2014/03/03 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
小学评语大全
2014/04/22 职场文书
学生安全责任书模板
2014/07/25 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python