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