欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中v-model對select的綁定操作

 更新時間：2020年08月31日 09:15:51   作者：Cherries_h  
這篇文章主要介紹了vue中v-model對select的綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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>

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

2、多選時（綁定到一個數(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渲染的動態(tài)選項：

<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 綁定的值通常是靜態(tài)字符串 (對于復選框也可以是布爾值)，有時我們可能想把值綁定到 Vue 實例的一個動態(tài)屬性上，這時可以用 v-bind 實現(xiàn)，并且這個屬性的值可以不是字符串

<select v-model="selected">
 <!-- 內(nèi)聯(lián)對象字面量 -->
 <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綁定后設(shè)置selected問題

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

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

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

相關(guān)文章

最新評論