vue中選中多個選項并且改變選中的樣式的實例代碼
更新時間：2020年09月16日 10:18:38 作者：爬坑的小白
這篇文章主要介紹了vue中選中多個選項并且改變選中的樣式，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
1：HTML:
<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 中定義
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);
},
總結
到此這篇關于vue中選中多個選項并且改變選中的樣式的實例代碼的文章就介紹到這了,更多相關vue選中改變樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
基于uniapp+vue3自定義增強版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機端增強版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運行一致2024-05-05
TypeError:res.forEach?is?not?a?function報錯解決辦法
這篇文章主要給大家介紹了關于TypeError:res.forEach?is?not?a?function報錯的解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
Vue項目如何引入bootstrap、elementUI、echarts
這篇文章主要介紹了Vue項目如何引入bootstrap、elementUI、echarts,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue中響應式布局如何將字體大小改成自適應，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實現(xiàn)手機號、驗證碼登錄（60s禁用倒計時）
這篇文章主要介紹了Vue實現(xiàn)手機號、驗證碼登錄（60s禁用倒計時），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了Vue+canvas實現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了使用el-form-item設置標簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)div高度可拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
ElementUI中el-form組件的rules參數(shù)舉例詳解
Form組件提供了表單驗證的功能,只需要通過rules屬性傳入約定的驗證規(guī)則,并將Form-Item的prop屬性設置為需校驗的字段名即可,下面這篇文章主要給大家介紹了關于ElementUI中el-form組件的rules參數(shù)的相關資料,需要的朋友可以參考下2023-10-10