1、單選時

<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表達式的value初始值未能匹配任何選項，<select>

元素將被渲染為“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。

2、多選時（綁定到一個數組）

<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渲染的動態選項：

<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’ } ] }})

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

<select v-model='selected'> <!-- 內聯對象字面量 --> <option v-bind:value='{ number: 123 }'>123</option></select>

// 當選中時typeof vm.selected // => ’object’vm.selected.number // => 123

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

補充知識：v-model綁定后設置selected問題

v-model綁定數據后設置selected無效原因

v-model綁定的數據需要與selected的option值相同才生效

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