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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Vue.js用法详解
Nov 13 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JS实现公告上线滚动效果
Jan 10 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
第七节--类的静态成员
2006/11/16 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
学习新党章思想汇报
2014/01/09 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
差生评语大全
2014/05/04 职场文书
美术专业自荐信
2014/07/07 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年检验科工作总结
2015/04/27 职场文书
李强优秀员工观后感
2015/06/16 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
python和anaconda的区别
2022/05/06 Python
nginx之queue的具体使用
2022/06/28 Servers