vue循环数组改变点击文字的颜色


Posted in Javascript onOctober 14, 2019

本文实例为大家分享了vue循环数组改变点击文字颜色的具体代码,供大家参考,具体内容如下

效果图 如下所示

vue循环数组改变点击文字的颜色

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{
 list-style: none;
 margin: 0;
 padding: 0;
 }
 .red{
 color: red;
 }
 </style>
 </head>
 <body>
 <div id="app">
 <ul>
 <li v-for="(item,index) in username" @click="bution(index)" :class="index == colin?'red':''">{{index}}.{{item}}</li>
 </ul>
 </div>
 
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 const obj = {
 username:['张三','李四','王五','二麻子'],
 colin:-1,
 }
 const app = new Vue({
 el:'#app',
 data:obj,
 methods:{
 bution:function(e){
 this.colin = e
 }
 }
 })
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
微信小程序实现简单表格
Feb 14 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 #Javascript
VUE+node(express)实现前后端分离
Oct 13 #Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 #Javascript
javaScript把其它类型转换为Number类型
Oct 13 #Javascript
js 实现watch监听数据变化的代码
Oct 13 #Javascript
15 分钟掌握vue-next响应式原理
Oct 13 #Javascript
Vue3.x源码调试的实现方法
Oct 13 #Javascript
You might like
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
Vue3为什么这么快
2020/09/23 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python如何调用百度识图api
2020/09/29 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
药品采购员岗位职责
2014/02/08 职场文书
经典促销广告词大全
2014/03/19 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
刑事起诉书范文
2015/05/19 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript