vue 實現多選和單選

2021-10-23 14:51:43 字數 1020 閱讀 2580

上個小小的效果圖,然後具體實現看**

template

}聊天

style

/* 這是沒選中的樣式 */

.choose

/* 這是選中的樣式 */

.green

data

list: [

, ,

],arr: ,

methods

choose: function(i) );

} else

}

tip:

這裡面有兩個es6的語法,includes

這裡是別的大佬寫的詳解,可以看一下

)和filter(這裡是別的大佬寫的詳解,可以看一下)

vue 實現單選 多選效果

不過我以前都寫過這三種方法了,很pang額,怕之後忘記了,偷個懶拿別人的,以免以後忘記了 一 單選 思路 當點選的索引值 v for迴圈的索引值時,給你那個li新增選中樣式 html ul class box li v for c,index of cities class click change...

vue元件 支援單選或者多選

之前做了乙個單頁面的單選和多選,這裡我整理了一下,封裝成元件,能夠同時支援單選和多選。我這裡的 是在vue腳手架 vue cli 上開發完成的,搭建方法這裡就不細說了。這個元件的名字呢命為 option.vue option.vue html css ul,li chooser chooser li...

ListView 實現多選 單選

listview自身帶了單選 多選模式,可通過listview.setchoicemode來設定 listview.setchoicemode listview.choice mode multiple 開啟多選模式 listview.setchoicemode listview.choice mo...