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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
js随机生成一个验证码
Jun 01 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
js根据日期判断星座的示例代码
2014/01/23 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python WSGI的深入理解
2018/08/01 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
家长会学生演讲稿
2014/04/26 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python