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删除html内容的标签样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3 toRef函数和toRefs函数,文中介绍了ref和toRef的区别，ref本质是拷贝，修改响应式数据不会影响原始数据，toRef的本质是引用关系，修改响应式数据会影响原始数据，需要的朋友可以参考下2022-11-11
这里提供一个Vue单点登录的demo给大家参考，对Vue实现单点登录控件的完整代码感兴趣的朋友跟随小编一起看看吧2021-11-11
这篇文章主要介绍了vue如何使用笛卡尔积算法构建sku表格问题，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总
在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧2024-06-06
今天我们来说一说vue1.0和vue2.0的主要变化有哪些？对vue相关知识感兴趣的朋友一起学习吧2017-05-05
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue中如何使用math.js问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vuex如何获取getter对象中的值(包括module中的getter)
这篇文章主要介绍了Vuex如何获取getter对象中的值(包括module中的getter)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue2.0 UI框架ElementUI的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最新评论