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调用WebService的示例
Apr 07 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python函数学习笔记
2008/10/07 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
毕业生就业自荐书
2013/12/15 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
护理职业生涯规划书
2014/01/24 职场文书
环保公益策划方案
2014/08/15 职场文书
师德标兵事迹材料
2014/12/19 职场文书
三方合作意向书范本
2015/05/09 职场文书
社区服务理念口号
2015/12/25 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python