个人中心
gpt4 book ai didi

Vue实现点击当前行变色

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue实现点击当前行变色由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了Vue实现点击当前行变色的具体代码，供大家参考，具体内容如下 。

话不多说,先上效果 。

Vue实现点击当前行变色

默认第一行为红色,当点击第二行的时候,只有第二行变为红色 。

代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < title >Title</ title >
  < style >
   .active{
    color: red;;
   }
  </ style >
</ head >
< body >
  < div id = "app" >
  < ul >
  < li v-for = "(item,index) in names" :class = "{active:currentIndex === index}" @ click = "liClick(index)" >{{item}}</ li >
  </ ul >
  </ div >
  <!-- 引入Vue -->
  < script src = "vue.js" ></ script >
  < script >
  const app = new Vue({
  el:"#app",
  data:{
  names:['xiaoqiao','xiaosheng','xiaonan'],
  currentIndex:0
  },
  methods:{
  liClick(index){
   this.currentIndex = index
  }
  }
  })
  </ script >
</ body >
</ html >

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习.

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

原文链接：https://blog.csdn.net/yehuaner33/article/details/106170289 。

最后此篇关于Vue实现点击当前行变色的文章就讲到这里了,如果你想了解更多关于Vue实现点击当前行变色的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： 浅谈JSON5解决了JSON的两大痛点
文章推荐： DELL R720服务器安装Windows Server 2008 R2系统的图文详解
文章推荐： 如何在JavaScript中等分数组的实现
文章推荐： 使用Mock.js生成前端测试数据
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com