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' }
]
}
})
對于單選按鈕，復(fù)選框及選擇框的選項，v-model 綁定的值通常是靜態(tài)字符串 (對于復(fù)選框也可以是布爾值)，有時我們可能想把值綁定到 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)文章
這篇文章主要給大家介紹了關(guān)于vue制作點擊切換圖片效果的詳細思路與步驟,圖片切換是一個很經(jīng)典的Vue入門學習案例,在你學習完一些基本的v-指令后,你可以嘗試去寫一個簡單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下2023-11-11
vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點
這篇文章主要為大家介紹了vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實例形式分析了v-model實現(xiàn)表單input元素數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vant組件表單外部的button觸發(fā)form表單的submit事件問題
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
我們正常在開發(fā)項目中,表格的風格是一致的,但是表格或多或少會有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對時間進行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue插值表達式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達式，在插值表達式中可以寫任何合法的js表達式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
Vue?ECharts實現(xiàn)機艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實現(xiàn)機艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
Vue?Router?提供了強大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03