Vue.js 中的 v-model 指令及綁定表單元素的方法
我們可以使用 Vue.js 中的 v-model 指令來(lái)完成表單數(shù)據(jù)的雙向綁定。
1 基礎(chǔ)用法
1.1 文本輸入框（text）
這里演示了在文本輸入框上輸入的內(nèi)容，會(huì)實(shí)時(shí)映射到綁定的數(shù)據(jù)上。
html：
<div id="app">
<input type="text" v-model="content" placeholder="請(qǐng)輸入">
<p>輸入框：{{content}}</p>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
content: ''
}
});
</script>
效果：
1.2 大文本輸入框（textarea）
綁定方法與文本輸入框相同。
html：
<div id="app2">
<textarea v-model="content" placeholder="請(qǐng)輸入"></textarea>
<p>內(nèi)容：</p>
<p style="white-space: pre">{{content}}</p>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
content: ''
}
});
效果：
這里對(duì)展示的內(nèi)容所對(duì)應(yīng)的 <p> 元素加了 white-space: pre 樣式，這樣內(nèi)容即使帶有回車(chē)符也會(huì)保留。
--------------------------------------------------------------------------------
注意：表單控件所顯示的值只依賴(lài)于所綁定的數(shù)據(jù)，所以即便設(shè)置了表單控件中的 value值，也不會(huì)起作用哦。同理，<textarea>xxx</textarea>之間的值也無(wú)效。
之前的示例我們可以發(fā)現(xiàn)，使用中文輸入法時(shí)，只有確定選中的詞語(yǔ)，才會(huì)被如果 Vue.js 所更新。如果希望輸入的內(nèi)容實(shí)時(shí)更新，那么可以使用 @input。
html：
<div id="app3">
<textarea @input="inputHandler" placeholder="請(qǐng)輸入"></textarea>
<p>內(nèi)容：</p>
<p style="white-space: pre">{{content}}</p>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
content: ''
},
methods: {
inputHandler: function (event) {
this.content = event.target.value;
}
}
});
可以看出，即使在 @input 定義的函數(shù)不帶參數(shù)，Vue.js 也會(huì)在定義的函數(shù)（示例中的 inputHandler）中傳入 event 原生事件對(duì)象。
效果：
1.3 單選框
單選框一般都有多個(gè)條件可供選擇，既然是單選框，自然希望實(shí)現(xiàn)互斥效果，我們可以使用 v-model 指令配合單選框的 value 來(lái)實(shí)現(xiàn)。
html：
<div id="app4">
<input id="radio1" type="radio" v-model="checked" value="文學(xué)">
<label for="radio1">文學(xué)</label>
<input id="radio2" type="radio" v-model="checked" value="藝術(shù)">
<label for="radio2">藝術(shù)</label>
<input id="radio3" type="radio" v-model="checked" value="經(jīng)濟(jì)">
<label for="radio3">經(jīng)濟(jì)</label>
<br>
<p>選擇了：{{checked}}</p>
</div>
js：
var app4 = new Vue({
el: '#app4',
data: {
checked: '文學(xué)'
}
});
效果：
1.4 復(fù)選框
復(fù)選框的綁定方式與單選框相同，只不過(guò)復(fù)選框所對(duì)應(yīng)的數(shù)據(jù)類(lèi)型是數(shù)組罷了。
html：
<div id="app5">
<input id="checkbox1" type="checkbox" v-model="checked" value="文學(xué)">
<label for="checkbox1">文學(xué)</label>
<input id="checkbox2" type="checkbox" v-model="checked" value="藝術(shù)">
<label for="checkbox2">藝術(shù)</label>
<input id="checkbox3" type="checkbox" v-model="checked" value="經(jīng)濟(jì)">
<label for="checkbox3">經(jīng)濟(jì)</label>
<br>
<p>選擇了：{{checked}}</p>
</div>
js：
var app5= new Vue({
el: '#app5',
data: {
checked: ['文學(xué)','藝術(shù)']
}
});
效果：
1.5 下拉選擇框
1.5.1 單選
html：
<div id="app6">
<select v-model="selected">
<option value="1">文學(xué)</option>
<option value="2">藝術(shù)</option>
<option>經(jīng)濟(jì)</option>
</select>
<br>
<p>選擇了：{{selected}}</p>
</div>
js：
var app6 = new Vue({
el: '#app6',
data: {
selected: '1'
}
});
效果：
可以看出，如果 <option> 含有 value 值，則會(huì)先匹配該值；如果沒(méi)有，則匹配 <option> 中的 text 值（比如示例中的 <option>經(jīng)濟(jì)</option>）。
1.5.2 多選
為 <select> 標(biāo)簽添加 multiple 屬性，即可實(shí)現(xiàn)多選。
html：
<div id="app7">
<select v-model="selected" multiple>
<option value="1">文學(xué)</option>
<option value="2">藝術(shù)</option>
<option>經(jīng)濟(jì)</option>
</select>
<br>
<p>選擇了：{{selected}}</p>
</div>
在實(shí)際應(yīng)用場(chǎng)景，<select> 標(biāo)簽中的 <opinion> 一般是通過(guò) v-for 指令動(dòng)態(tài)輸出的，其中每一項(xiàng)的 value 或 text 都可以使用 v-bind 動(dòng)態(tài)輸出的。
html：
<div id="app8">
<select v-model="selected">
<option v-for="option in options"
:value="option.value">{{option.text}}
</option>
</select>
<br>
<p>選擇了：{{selected}}</p>
</div>
js：
var app8 = new Vue({
el: '#app8',
data: {
selected: '1',
options: [
{text: '文學(xué)', value: '1'},
{text: '藝術(shù)', value: '2'}
]
}
});
效果：
--------------------------------------------------------------------------------
因?yàn)?select 標(biāo)簽的呈現(xiàn)樣式依賴(lài)于瀏覽器，所以在實(shí)際業(yè)務(wù)場(chǎng)景中，我們更多的是使用 div 來(lái)模擬 select 標(biāo)簽的列表功能，而這可以通過(guò)使用 Vue.js 自定義組件的方式來(lái)實(shí)現(xiàn)一個(gè)通用的下拉選擇組件。
以上示例 DEMO
2 綁定動(dòng)態(tài)變量
之前所說(shuō)的示例，v-model 綁定的都是靜態(tài)變量。我們可以使用 v-bind 來(lái)綁定動(dòng)態(tài)變量。
2.1 單選框
html：
<div id="app">
<input id="radio1" type="radio" v-model="picked" :value="value">
<label for="radio1">文學(xué)</label>
<input id="radio2" type="radio" v-model="picked" :value="value2">
<label for="radio2">藝術(shù)</label>
<input id="radio3" type="radio" v-model="picked" :value="value3">
<label for="radio3">經(jīng)濟(jì)</label>
<br>
<p>{{picked}}</p>
<p>{{value}},{{value2}},{{value3}}</p>
</div>
js：
var app = new Vue({
el: '#app',
data: {
picked: false,
value: '文學(xué)',
value2: '藝術(shù)',
value3: '經(jīng)濟(jì)',
}
});
效果：
示例中定義的單選框默認(rèn)值為 picked 所定義的 false。當(dāng)選中某個(gè)單選框時(shí)，則動(dòng)態(tài)綁定在 :value 中定義的變量。
2.2 復(fù)選框
html：
<div id="app2">
<input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2">
<label for="checkbox">開(kāi)關(guān)</label>
<p>checked：{{checked}}</p>
<p>value1：{{value1}}</p>
<p>value2：{{value2}}</p>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
value1: '亮',
value2: '暗',
checked: ''
}
});
效果：
復(fù)選框的默認(rèn)值綁定的是 v-model 定義的變量，而勾選與取消勾選所綁定的值，則分別由 :true-value 與 false-value 來(lái)實(shí)現(xiàn)動(dòng)態(tài)綁定。
2.3 下拉選擇框
html：
<div id="app3">
<select v-model="selected">
<option :value="{number:1}">文學(xué)</option>
<option :value="{number:2}">藝術(shù)</option>
</select>
<br>
<p>選擇了：{{selected.number}}</p>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
selected: ''
}
});
效果：
當(dāng)選中某個(gè) option 時(shí)，app3.selected 為 Object，所以 selected.number 即為 :value 定義的綁定值。
以上示例 DEMO
相關(guān)文章
本文主要介紹了vue中el-message的封裝使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng),需要的朋友可以參考下2023-11-11
vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
一直對(duì)編譯原理的東西都有一種恐懼感，感覺(jué)太難了，看不懂，打開(kāi)vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
vue echarts實(shí)現(xiàn)綁定事件和解綁事件
這篇文章主要介紹了vue echarts實(shí)現(xiàn)綁定事件和解綁事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
詳解vue.js 開(kāi)發(fā)環(huán)境搭建最簡(jiǎn)單攻略
本篇文章主要介紹了vue.js 開(kāi)發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程
在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開(kāi)發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Vue3項(xiàng)目的3種創(chuàng)建方式代碼示例
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目,正好記錄一下,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目的3種創(chuàng)建方式,需要的朋友可以參考下2024-03-03
vue+element+electron仿微信實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04