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动态加载js文件的方法
Dec 24 Javascript
Javascript节点关系实例分析
May 15 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
js Math 对象的方法
2013/09/01 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python 创建子进程模块subprocess详解
2015/04/08 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python实现AES加密与解密
2019/03/28 Python
详解python中eval函数的作用
2019/10/22 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
python实现微信打飞机游戏
2020/03/24 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
师德师风的心得体会
2014/09/02 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
实习班主任自我评价
2015/03/11 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
留学推荐信英文范文
2015/03/26 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python