之前做了乙個單頁面的單選和多選，這裡我整理了一下，封裝成元件，能夠同時支援單選和多選。
我這裡的**是在vue腳手架（vue-cli）上開發完成的，搭建方法這裡就不細說了。
這個元件的名字呢命為 option.vue
option.vue
html：
css：
ul, lijs：.chooser
.chooser-list li
.chooser-list li.active
export default到這裡為止呢，我們需要把兩個方法裡的邏輯補齊。},props: ,
cssstyle: object //可以自定義單選或者多選的樣式
},methods: ,
checkactive (item)
}}
optionclick()，這個方法要實現點選然後選中，傳的引數是當前陣列值，在裡面我們需要判斷是單選還是多選
optionsclick (item) else else }}那麼在checkactive方法中，需要得到乙個布林值，來確定是否新增類名active
checkactive (item)效果圖如下：return this.currvalarr.indexof(item) !== -1
}
雖然現在看上去基本ok了，單選多選都能實現，但我們還希望他能實現雙向繫結，現在檢視可以更新資料，我們接下來完成資料更新檢視
template:
當前選中值：}
當前選中值：}js:
data ()option.vue中}
export default ,這樣，就實現了雙向繫結了。使用了自定義元件的v-model，利用model選項，來指定prop和event。不了解自定義元件model的可以去官網看，上面講解的很詳細。props: ,
cssstyle: object
},methods:
}
vue 實現多選和單選
上個小小的效果圖，然後具體實現看 template 聊天 style 這是沒選中的樣式 choose 這是選中的樣式 green data list arr methods choose function i else tip 這裡面有兩個es6的語法，includes 這裡是別的大佬寫的詳解，可以...
vue 實現單選 多選效果
不過我以前都寫過這三種方法了，很pang額，怕之後忘記了，偷個懶拿別人的，以免以後忘記了 一 單選 思路 當點選的索引值 v for迴圈的索引值時，給你那個li新增選中樣式 html ul class box li v for c,index of cities class click change...
vue封裝Checkbox多選框元件
普通多選框列表 v model value getdata getinfo options options 您選中的是 p 有禁用選項的多選框列表 v model value1 getdata getttinfo options options1 您選中的是 p 有選中禁用的多選框列表 v mode...