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数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JavaScript实现省份城市的三级联动
Feb 11 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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/12/05 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
详解Python中的多线程编程
2015/04/09 Python
浅析Python基础-流程控制
2016/03/18 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
环境科学专业个人求职信
2013/09/26 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
幼儿教育感言
2014/02/05 职场文书
班组拓展活动方案
2014/08/14 职场文书
老员工辞职信范文
2015/05/12 职场文书
亮剑观后感500字
2015/06/05 职场文书
百万英镑观后感
2015/06/09 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers