在前端開發(fā)中，聯(lián)機(jī)選擇（multi-select）是一個(gè)非常常見的UI模塊。Vue作為一款優(yōu)秀的前端框架，也可以實(shí)現(xiàn)這個(gè)功能。下面我們來看一下Vue如何實(shí)現(xiàn)聯(lián)機(jī)選擇。

在Vue中實(shí)現(xiàn)聯(lián)機(jī)選擇，我們可以使用vue-multiselect組件。這個(gè)組件可以方便地創(chuàng)建聯(lián)機(jī)選擇，而且非常靈活。

import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
options: ['選項(xiàng)1', '選項(xiàng)2', '選項(xiàng)3'],
value: []
}
}
}

上面的代碼中，我們首先使用import語句導(dǎo)入了vue-multiselect組件，然后在Vue實(shí)例中注冊了這個(gè)組件。在data中，我們定義了options用于存儲選項(xiàng)，value用于存儲選擇的值。

下面是模板代碼：

<multiselect v-model="value" :options="options"></multiselect>

在這個(gè)模板中，我們使用了v-model指令來綁定value屬性，這樣選擇的值就可以被Vue實(shí)例捕獲到。options屬性綁定了所有可選的選項(xiàng)。

通過使用vue-multiselect組件，實(shí)現(xiàn)聯(lián)機(jī)選擇非常簡單。另外，vue-multiselect還提供了很多自定義選項(xiàng)和回調(diào)函數(shù)，可以滿足各種需要。