1、單選時(shí)

<select v-model='selected'> <option disabled value=''>請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span>data: { selected: ’’ }

如果 v-model表達(dá)式的value初始值未能匹配任何選項(xiàng)，<select>

元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會(huì)使用戶無法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會(huì)觸發(fā) change 事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。

2、多選時(shí)（綁定到一個(gè)數(shù)組）

<select v-model='selected' multiple style='width: 50px;'> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span>

data: { selected: [] }

3、用 v-for渲染的動(dòng)態(tài)選項(xiàng)：

<select v-model='selected'> <option v-for='option in options' v-bind:value='option.value'> {{ option.text }} </option></select><span>Selected: {{ selected }}</span>

new Vue({ el: ’...’, data: { selected: ’A’, options: [ { text: ’One’, value: ’A’ }, { text: ’Two’, value: ’B’ }, { text: ’Three’, value: ’C’ } ] }})

對于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model 綁定的值通常是靜態(tài)字符串 (對于復(fù)選框也可以是布爾值)，有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串

<select v-model='selected'> <!-- 內(nèi)聯(lián)對象字面量 --> <option v-bind:value='{ number: 123 }'>123</option></select>

// 當(dāng)選中時(shí)typeof vm.selected // => ’object’vm.selected.number // => 123

具體參考 https://cn.vuejs.org/v2/guide/forms.html#選擇框

補(bǔ)充知識：v-model綁定后設(shè)置selected問題

v-model綁定數(shù)據(jù)后設(shè)置selected無效原因

v-model綁定的數(shù)據(jù)需要與selected的option值相同才生效

以上這篇vue中v-model對select的綁定操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。