本文實例為大家分享了Vue實現(xiàn)點擊當(dāng)前行變色的具體代碼，供大家參考，具體內(nèi)容如下
話不多說,先上效果
默認(rèn)第一行為紅色,當(dāng)點擊第二行的時候,只有第二行變?yōu)榧t色
代碼如下:
|
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> |
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/yehuaner33/article/details/106170289
