Vue学习——实现点击列表改变颜色
Vue实现点击列表改变其中一项的颜色需求代码解决思路完整代码成果图注意事项1. 方法中 this.isActive 的赋值2. isActive 值的设定有点讲究需求简单实现点击列表其中一项，改变其颜色代码解决思路首先设定想要改变的颜色<style>.active{color: red;}</style>使用 v-for 实现列表展示，v-bind 动态绑定 class，v
·
Vue实现点击列表改变其中一项的颜色
需求
简单实现点击列表其中一项，改变其颜色
代码
解决思路
首先设定想要改变的颜色
<style>
.active{
color: red;
}
</style>
使用 v-for 实现列表展示，v-bind 动态绑定 class，v-on:click 实现点击事件。
设置一个 index 来监听下标，当 index 的值和 isActive 的值相等时，点击 items 事件，执行 indexClick(index) 函数。
<div id="app">
<ul>
<li v-for="(items,index) in movies" @click="indexClick(index)" :class="{active:index==isActive}">{{index}}--{{items}}</li>
</ul>
</div>
初始化及定义数组
const app = new Vue({
el: '#app',
data: {
movies: ['星球大战','火影忍者','美女与野兽'],
isActive: 0,
},
定义函数
methods: {
indexClick: function(index){
this.isActive = index
}
}
完整代码
<!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="(items,index) in movies" @click="indexClick(index)" :class="{active:index==isActive}">{{index}}--{{items}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['星球大战','火影忍者','美女与野兽'],
isActive: 0,
},
methods: {
indexClick: function(index){
this.isActive = index
}
}
})
</script>
</body>
</html>
成果图
注意事项
1. 方法中 this.isActive 的赋值
data: {
movies: ['星球大战','火影忍者','美女与野兽'],
isActive: true,
},
methods: {
indexClick: function(index){
this.isActive = !this.isActive
}
}
如果将 isActive 的值设定为 true，indexClick 中设定 this.isActive = !this.isActive，那么结果是只能点击 index 为1和0的项，而点击 index 为2的项时，又跳回了index为0的项。
2. isActive 值的设定有点讲究
如果将值设定为 ture，那么红色一开始就在 index 为1的那一项上，想要红色在第一项上，就要设定 isActive 的初始值为0。
值设为true的时候：
值设为0的时候：
3.可改进的地方
这一块改为===（严格相等）
//1.== 用于比较、判断两者相等，比较时可自动换数据类型-->
//2.=== 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。-->
<li v-for="(items,index) in movies" @click="indexClick(index)" :class="{active:index===isActive}">{{index}}--{{items}}</li>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)