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 表单规则集合对象
Jul 21 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
基于纯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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
node 版本切换的实现
2020/02/02 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
感恩教育活动总结
2014/05/05 职场文书
大气污染防治方案
2014/05/19 职场文书
档案工作汇报材料
2014/08/21 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
2014年双拥工作总结
2014/11/21 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python