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ì)使用戶無法選擇第一個(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問題
v-model綁定數(shù)據(jù)后設(shè)置selected無效原因
v-model綁定的數(shù)據(jù)需要與selected的option值相同才生效
以上這篇vue中v-model對(duì)select的綁定操作就是小編分享給大家的全部內(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è)簡單的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事件問題
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
我們正常在開發(fā)項(xiàng)目中,表格的風(fēng)格是一致的,但是表格或多或少會(huì)有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對(duì)時(shí)間進(jìn)行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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ū)別，{{}}這種語法叫做插值表達(dá)式，在插值表達(dá)式中可以寫任何合法的js表達(dá)式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實(shí)現(xiàn)機(jī)艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
Vue3?路由配置與導(dǎo)航實(shí)戰(zhàn)教程
Vue?Router?提供了強(qiáng)大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實(shí)戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03