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