這篇文章給大家分享的是有關(guān)Vuejs中如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),內(nèi)蒙古企業(yè)網(wǎng)站建設(shè),內(nèi)蒙古品牌網(wǎng)站建設(shè),網(wǎng)站定制,內(nèi)蒙古網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,內(nèi)蒙古網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。基本用法

表單控件在實(shí)際業(yè)務(wù)較為常見(jiàn)，比如單選、多選、下拉選擇、輸入框等，用它們可以完成數(shù)據(jù)的錄入、校驗(yàn)、提交等。
Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數(shù)據(jù)，例如在輸入框上使用時(shí)，輸入的內(nèi)容會(huì)實(shí)時(shí)映射到綁定的數(shù)據(jù)上。

 例如下面的例子：

<div id="app">
 <input type="text" v-model="message" placeholder="請(qǐng)輸入...">
 <p>輸入的內(nèi)容是：{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

在輸入框輸入的同時(shí)，{{message}}也會(huì)實(shí)時(shí)將內(nèi)容渲染在視圖中。

 如圖6-1所示：

對(duì)于文本域<textarea>也是同樣的用法：

<div id="app">
 <textarea v-model="text" placeholder="請(qǐng)輸入..."></textarea>
 <p>輸入的內(nèi)容是：</p>
 <p >{{text}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 text: ""
 }
 });
</script>

提示：

•  提示v-model后，表單控件顯示的值只依賴所綁定的數(shù)據(jù)，不再關(guān)心初始化時(shí)的value屬性，對(duì)于在<textarea></textarea>之間插入的值，也不會(huì)生效。

•  使用v-model時(shí)，如果是用中文輸入法輸入中文，一般在沒(méi)有選定詞組前，也就是在拼音階段，Vue是不會(huì)更新數(shù)據(jù)的，當(dāng)敲下漢字時(shí)才會(huì)觸發(fā)鞥新。

•  如果希望總是實(shí)時(shí)更新，可以用@input來(lái)替代v-model。

•  事實(shí)上，v-model也是一個(gè)特殊的語(yǔ)法糖，只不過(guò)它會(huì)在不同的表單上智能處理。

•  例如下面的示例：

<div id="app">
 <input type="text" @input="handleInput" placeholder="請(qǐng)輸入...">
 <p>輸入的內(nèi)容是：{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 },
 methods: {
 handleInput: function(event) {
 this.message = event.target.value;
 }
 }
 });
</script>

來(lái)看看更多的表單控件。

單選按鈕：

單選按鈕在單獨(dú)使用時(shí)，不需要v-model，直接使用v-bind綁定一個(gè)布爾類型的值，為true時(shí)選中，為false時(shí)不選。
 例如：

<div id="app">
 <input type="radio" :checked="picked">
 <label>單選按鈕</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: true
 }
 });
</script>

如果是組合使用來(lái)實(shí)現(xiàn)互斥選擇的效果，就需要v-model配合value來(lái)使用：

<div id="app">
 <input type="radio" v-model="picked" value="html" id="html">
 <label for="html">HTML</label>
 
 <input type="radio" v-model="picked" value="js" id="js">
 <label for="js">JavaScript</label>
 
 <input type="radio" v-model="picked" value="css" id="css">
 <label for="css">CSS</label>
 
 <p>您選擇的是：{{picked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: "js"
 }
 });
</script>

數(shù)據(jù)picked的值與表單按鈕的value值一致時(shí)，就會(huì)選中該項(xiàng)，所以當(dāng)前狀態(tài)下選中的是第二項(xiàng)。
 如圖6-2所示：

復(fù)選框：

復(fù)選框也分單獨(dú)使用和組合使用，不過(guò)用法稍與單選不同。

 復(fù)選框單獨(dú)使用時(shí)，也是用v-model來(lái)綁定一個(gè)布爾值。

 例如：

<div id="app">
 <input type="checkbox" v-model="checked" id="checked">
 <label for="checked">選擇狀態(tài)：{{checked}}</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: false
 }
 });
</script>

在勾選時(shí)，數(shù)據(jù)checked的值改為了true，<label>中渲染的內(nèi)容也會(huì)更新。

組合使用時(shí)，也是v-model與value一起，多個(gè)勾選框都綁定到同一個(gè)數(shù)組類型的數(shù)據(jù)，value的值在數(shù)據(jù)當(dāng)中，就會(huì)選中這一項(xiàng)。

 這一過(guò)程也是雙向的，在勾選時(shí)，value的值也會(huì)自動(dòng)push到這個(gè)數(shù)組中。

 實(shí)例代碼如下：

<div id="app">
 <input type="checkbox" v-model="checked" value="html" id="html">
 <label for="html">HTML</label>
 <br>
 <input type="checkbox" v-model="checked" value="js" id="js">
 <label for="js">JavaScript</label>
 <br>
 <input type="checkbox" v-model="checked" value="css" id="css">
 <label for="css">CSS</label>
 <br>
 <p>你選擇的是：{{checked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: ["html", "css"]
 }
 });
</script>

當(dāng)前狀態(tài)下的結(jié)果如圖6-3所示：

選擇列表：

選擇列表就是下拉選擇器，也是常見(jiàn)的表單控件，同樣也分為單選和多選兩種方式。
 先看一下單選的示例代碼：

<div id="app">
 <select v-model="selected">
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你選擇的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: "html"
 }
 });
</script>

<option>是備選項(xiàng)，如果含有value屬性，v-model就會(huì)優(yōu)先匹配value的值；

如果沒(méi)有，就會(huì)直接匹配<option>的text。

 比如選中第二項(xiàng)時(shí)，selected的值為js，而不是JavaScript。

給<select>添加屬性multiple就可以多選了，此時(shí)v-model綁定的是一個(gè)數(shù)組，與復(fù)選框用法類似。
 實(shí)例代碼如下：

<div id="app">
 <select v-model="selected" multiple>
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你選擇的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ["html", "js"]
 }
 });
</script>

在業(yè)務(wù)中，<option>經(jīng)常用v-for動(dòng)態(tài)輸出，value和text也是用v-bind來(lái)動(dòng)態(tài)輸出的。
 例如：

<div id="app">
 <select v-model="selected">
 <option v-for="item in options" :value="item.value">{{item.text}}</option>
 </select>
 <p>你選擇的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 options: [
 {text:"HTML", value:"html"},
 {text:"JavaScript", value:"js"},
 {text:"CSS", value:"css"},
 ],
 selected: "html"
 }
 });
</script>

雖然用選擇列表<select>控件可以很簡(jiǎn)單地完成下拉選擇的需求，但是在實(shí)際業(yè)務(wù)中反而不常用，因?yàn)樗臉邮揭蕾嚻脚_(tái)和瀏覽器，無(wú)法統(tǒng)一，也不太美觀，功能也受限，，比如不支持搜索，所以常見(jiàn)的解決方案是用<div>moi一個(gè)類似的控件。

 當(dāng)閱讀完第7章組件的內(nèi)容后，可以嘗試編寫一個(gè)下拉選擇器的通用組件。

6.2 綁定值

上一節(jié)介紹的單選按鈕、復(fù)選框和選擇列表在單獨(dú)使用或單選的模式下，v-model綁定的值是一個(gè)靜態(tài)字符串或布爾值。
 但在業(yè)務(wù)中，有時(shí)需要綁定一個(gè)動(dòng)態(tài)的數(shù)據(jù)，這時(shí)可以用v-bind來(lái)實(shí)現(xiàn)。

單選按鈕：

<div id="app">
 <input type="radio" v-model="picked" :value="value">
 <label>單選按鈕</label>
 <p>{{picked}}</p>
 <p>{{value}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: false,
 value: 123
 }
 });
</script>

在選中時(shí)，app.picked===app.value，值都是123。

復(fù)選框：

<div id="app">
 <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
 <label>復(fù)選框</label>
 <p>{{toggle}}</p>
 <p>{{value1}}</p>
 <p>{{value2}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 toggle: false,
 value1: "a",
 value2: "b"
 }
 });
</script>

 勾選時(shí)，app.toggle===app.value1；

 未勾選時(shí)，app.toggle===app.value2。

選擇列表：

<div id="app">
 <select v-model="selected">
 <option :value="{number:123}">123</option>
 </select>
 {{selected.number}}
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ""
 }
 });
</script>

 當(dāng)選中時(shí)，app.selected是一個(gè)Object，所以app.selected.number===123。

6.3 修飾符

與事件的修飾符類似，v-model也有修飾符，用于控制數(shù)據(jù)同步的時(shí)機(jī)。

.lazy：

在輸入框中，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)(除了提示中介紹的中文輸入法情況外)。

 使用修飾符.lazy會(huì)轉(zhuǎn)變?yōu)樵赾hange事件中同步，示例代碼如下：

<div id="app">
 <input type="text" v-model.lazy="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 這是，message并不是實(shí)時(shí)改變的，而是在失焦或按回車時(shí)才更新。

.number：

使用修飾符.number可以將輸入轉(zhuǎn)換為Number類型，否則雖然你輸入的是數(shù)字，但它的類型其實(shí)是String。
 比如在數(shù)字輸入框時(shí)會(huì)比較有用，示例代碼如下：

<div id="app">
 <input type="number" v-model.number="message">
 <p>{{typeof message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: 123
 }
 });
</script>

 .trim：

修飾符.trim可以自動(dòng)過(guò)濾輸入的首尾空格，示例代碼如下：

<div id="app">
 <input type="text" v-model.trim="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 從Vue.js 2.x開(kāi)始，v-model還可以用于自定義組件，滿足定制化的需求

感謝各位的閱讀！關(guān)于“Vuejs中如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：Vuejs中如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定-創(chuàng)新互聯(lián)
文章URL：http://jinyejixie.com/article18/dchsdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、軟件開(kāi)發(fā)、標(biāo)簽優(yōu)化、小程序開(kāi)發(fā)、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)