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

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

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

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è)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論