1：HTML:
|
1
2
3
4
5
6
|
<ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</div> <div>{{item.sex}}</div> </li></ul> |
2:data 中定義
|
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
|
rSelect:[], touristList:[ { name:"張三", sex:"男", id:0 }, { name:"李四", sex:"男", id:1 }, { name:"小龍女", sex:"女", id:2 }, { name:"周芷若", sex:"女", id:3 }, { name:"夕月", sex:"女", id:4 }, ], |
3：methods中
|
1
2
3
4
5
6
7
8
9
|
onStorage(value,e){ console.log(this.rSelect.indexOf(value)); if (this.rSelect.indexOf(value) !== -1) { this.rSelect.splice(this.rSelect.indexOf(value), 1); //取消 } else { this.rSelect.push(value);//選中添加到數(shù)組里 } console.log(this.rSelect); }, |
總結(jié)
到此這篇關(guān)于vue中選中多個選項并且改變選中的樣式的實例代碼的文章就介紹到這了,更多相關(guān)vue選中改變樣式內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/ZJ15981837003/article/details/108615486
