vue 實現單選 多選效果

2022-06-16 03:42:21 字數 1428 閱讀 2503

**

不過我以前都寫過這三種方法了,很pang額,怕之後忘記了,偷個懶拿別人的,以免以後忘記了

一、單選:

思路:當點選的索引值 == v-for迴圈的索引值時,給你那個li新增選中樣式

html:

<

ul class

="box"

>

<

li v-for

="c,index of cities"

:class

=""@click

="changelist(index)"

>}

li>

ul>

css樣式如下:

二、多選

方法一和方法二的主要的區別在於資料中有沒已有標註是選中狀態還是未選中狀態

css樣式如下:

view code

方法一:

思路:新增乙個新的空陣列arr(arr的裡元素的索引值表示,表示該索引值對應的li已經處於被選中狀態),如果arr陣列沒有點選的索引值,就新增到arr陣列裡,如果有就把這個索引,就把這個索引從陣列中刪除。

html:

<

ul class

="box"

>

<

li v-for

="c,index of cities"

:class

=""@click

="checkedbox(index)"

>}

li>

ul>

js:vue(,

methods :);

}else}}

})方法二:

思路:這個就更加通俗易懂了,把點選的那個是否選中的標誌取反就可以了

vue 實現多選和單選

上個小小的效果圖,然後具體實現看 template 聊天 style 這是沒選中的樣式 choose 這是選中的樣式 green data list arr methods choose function i else tip 這裡面有兩個es6的語法,includes 這裡是別的大佬寫的詳解,可以...

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...