v-bind动态绑定style属性的简单应用

需求:一个列表内使用v-for显示数组中的内容,并支持点击某项时颜色变化。

思路:v-for在进行遍历的时候可以拿出index关键字来使用,作为遍历的下标。这个下标是一会用来定位哪一项的。然后添加@click属性为一个传入了index值的函数,添加:class属性控制列表的CSS,它的启用禁用由currentIndex和index数值进行判断,使用严格相等判断符号===

currentIndex作为一个状态存储,是在data里面提前声明好的。在methods里面完成@click调用的函数,让当前index的值赋给currentIndex。这样每次点击都会让currentIndex的值变为点击的那个index值,vue会判断currentIndex(当前点击的)是否等于index(遍历到的),如果相等就说明点击了这,启用CSS,文字变色。

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
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>homework</title>
<style type="text/css">
.active {
color: #ff0000;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(m, index) in movies" @click="liClick(index)" :class="{active: currentIndex === index}">
{{index}}-{{m}}
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
movies: ['你的名字', '言叶之庭', '天气之子', '她和她的猫', '秒速五厘米'],
currentIndex: -1
},
methods: {
liClick(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信