1：HTML:

<ul class='content'> <li v-for='(item,index) in touristList' @click='onStorage(item,index)' : :key='item.id'><div>{{item.name}}</div><div>{{item.sex}}</div> </li> </ul>

2:data 中定義

rSelect:[], touristList:[ {name:'張三',sex:'男',id:0 }, {name:'李四',sex:'男',id:1 }, {name:'小龍女',sex:'女',id:2 }, {name:'周芷若',sex:'女',id:3 }, {name:'夕月',sex:'女',id:4 }, ],

3：methods中

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中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue選中改變樣式內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！