Vue实现点击当前行变色

更新时间：2020年12月14日 08:36:07 作者：xiaoShengSanYue

这篇文章主要为大家详细介绍了Vue实现点击当前行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

话不多说,先上效果

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

代码如下:

<!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前端组件学习教程进行学习。

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

您可能感兴趣的文章:

vue项目适配屏幕分辨率与屏幕的缩放适配详细教程
现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题，今天就这个问题给出解决方案，感兴趣的朋友跟随小编一起看看吧
2022-11-11
element中的el-upload附件上传与附件回显
这篇文章主要介绍了element中的el-upload附件上传与附件回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue之封装公用变量以及实现方式
这篇文章主要介绍了Vue之封装公用变量以及实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
go-gin-vue3-elementPlus带参手动上传文件的案例代码
这篇文章主要介绍了go-gin-vue3-elementPlus带参手动上传文件的案例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
Vue使用fabric.js实现局部截图与大图预览功能
这篇文章主要为大家详细介绍了Vue如何使用fabric.js实现局部截图与el-image-viewer大图预览功能,文中的示例代码讲解详细,感兴趣的可以了解下
2024-02-02
VUE多个下拉框实现双向联动效果
这篇文章主要为大家详细介绍了VUE多个下拉框实现双向联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue项目build后,图片加载不出来的解决
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue3之路由跳转与参数获取方式
这篇文章主要介绍了Vue3之路由跳转与参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
浅析Proxy如何实现Vue响应式
这篇文章主要是来和大家探讨一下，Vue的响应式系统仅仅是一个Proxy吗，本文将围绕此问题探索一下Proxy是如何实现Vue响应式的，感兴趣的小伙伴可以了解一下
2023-08-08
VUE的tab页面切换的四种方法
这篇文章主要介绍了VUE的tab页面切换的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04