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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue点击切换颜色的方法

    如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>

  • vue循环数组改变点击文字的颜色

    vue循环数组改变点击文字的颜色

    本文实例为大家分享了vue循环数组改变点击文字颜色的具体代码,供大家参考,具体内容如下 效果图 如下所示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ list-style: none; margin: 0; padding: 0; } .

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • vue forEach循环数组拿到自己想要的数据方法

    如下所示: <el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handleJurisdiction(

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • vue循环中点击选中再点击取消(单选)的实现

    没有展开时 点击展开之后 <div class="flashread_item_box_time"> <span class="moment_time">9分钟前</span> <div class="flashread_item_box_zan"> <span class="flashread_item_box_item"><i class="ico

  • Vue循环遍历选项赋值到对应控件的实现方法

    老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助 https://blog.csdn.net/yyp0304Devin 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了. 如动图所示,要完成这样的功能,肯定是要访问后端接口的 知道URL后,我们就知道携带的试题ID过去 一.传递ID 在点击编辑按钮事件中将ID传值过去 <el-

  • 关于Vue 监控数组的问题

    关于Vue 监控数组的问题

    目录 常见面试题 Vue 是如何追踪数据发生变化 Vue 如何更新数组 为什么有些数组的数据变更不能被 Vue 监测到 Vue 为什么不能通过下标操作数组或者改变数组的长度来触发视图更新 Vue 3.0 是如何处理的? 参考 常见面试题 Vue 如何监控数组 defineProperty 真的不能监测数组变化吗? Vue 是如何追踪数据发生变化 在 Vue 中当我们把一个普通的 JS 对象作为 data 传入 Vue 实例,Vue2.x 对这个数据初始化时将遍历这个对象所有的属性,并使用 JS

  • react如何修改循环数组对象的数据

    目录 修改循环数组对象的数据 问题描述 解决办法 案例说明 react使用循环并实现删除和修改 总结 修改循环数组对象的数据 问题描述 做一个消息评论列表,针对具体某一个消息,里面有“收藏”和“点赞”功能,但是发现直接修改对象的树形,无法改变视图,因此做了笔记,方便后续学习 解决办法 循环遍历所有的对象,然后修改对应的值,重新设置 数组对象 案例说明 import * as React from 'react'; import { Icon, Button, Input, Form, } fro

  • Vue 固定头 固定列 点击表头可排序的表格组件

    原理是将原table的指定行,指定列clone一份放在其上 实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac

  • vue.js获得当前元素的文字信息方法

    1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol

随机推荐