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);//選中添加到數組里 } console.log(this.rSelect); },

總結

到此這篇關于vue中選中多個選項并且改變選中的樣式的實例代碼的文章就介紹到這了,更多相關vue選中改變樣式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！