Vuejs學習筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定
表單類控件承載了一個網(wǎng)頁數(shù)據(jù)的錄入與交互，本章將介紹如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定。
6.1 基本用法
表單控件在實際業(yè)務較為常見，比如單選、多選、下拉選擇、輸入框等，用它們可以完成數(shù)據(jù)的錄入、校驗、提交等。
Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數(shù)據(jù)，例如在輸入框上使用時，輸入的內容會實時映射到綁定的數(shù)據(jù)上。
例如下面的例子：
<div id="app">
<input type="text" v-model="message" placeholder="請輸入...">
<p>輸入的內容是：{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
在輸入框輸入的同時，{{message}}也會實時將內容渲染在視圖中。
如圖6-1所示：
對于文本域<textarea>也是同樣的用法：
<div id="app">
<textarea v-model="text" placeholder="請輸入..."></textarea>
<p>輸入的內容是：</p>
<p style="white-space: pre;">{{text}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
text: ""
}
});
</script>
提示：
- 提示v-model后，表單控件顯示的值只依賴所綁定的數(shù)據(jù)，不再關心初始化時的value屬性，對于在<textarea></textarea>之間插入的值，也不會生效。
- 使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是在拼音階段，Vue是不會更新數(shù)據(jù)的，當敲下漢字時才會觸發(fā)鞥新。
- 如果希望總是實時更新，可以用@input來替代v-model。
- 事實上，v-model也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。
- 例如下面的示例：
<div id="app">
<input type="text" @input="handleInput" placeholder="請輸入...">
<p>輸入的內容是：{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
handleInput: function(event) {
this.message = event.target.value;
}
}
});
</script>
來看看更多的表單控件。
單選按鈕：
單選按鈕在單獨使用時，不需要v-model，直接使用v-bind綁定一個布爾類型的值，為true時選中，為false時不選。
例如：
<div id="app">
<input type="radio" :checked="picked">
<label>單選按鈕</label>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
picked: true
}
});
</script>
如果是組合使用來實現(xiàn)互斥選擇的效果，就需要v-model配合value來使用：
<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值一致時，就會選中該項，所以當前狀態(tài)下選中的是第二項。
如圖6-2所示：
復選框：
復選框也分單獨使用和組合使用，不過用法稍與單選不同。
復選框單獨使用時，也是用v-model來綁定一個布爾值。
例如：
<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ù)據(jù)checked的值改為了true，<label>中渲染的內容也會更新。
組合使用時，也是v-model與value一起，多個勾選框都綁定到同一個數(shù)組類型的數(shù)據(jù)，value的值在數(shù)據(jù)當中，就會選中這一項。
這一過程也是雙向的，在勾選時，value的值也會自動push到這個數(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>
當前狀態(tài)下的結果如圖6-3所示：
選擇列表：
選擇列表就是下拉選擇器，也是常見的表單控件，同樣也分為單選和多選兩種方式。
先看一下單選的示例代碼：
<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>是備選項，如果含有value屬性，v-model就會優(yōu)先匹配value的值；
如果沒有，就會直接匹配<option>的text。
比如選中第二項時，selected的值為js，而不是JavaScript。
給<select>添加屬性multiple就可以多選了，此時v-model綁定的是一個數(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è)務中，<option>經(jīng)常用v-for動態(tài)輸出，value和text也是用v-bind來動態(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>控件可以很簡單地完成下拉選擇的需求，但是在實際業(yè)務中反而不常用，因為它的樣式依賴平臺和瀏覽器，無法統(tǒng)一，也不太美觀，功能也受限，，比如不支持搜索，所以常見的解決方案是用<div>moi一個類似的控件。
當閱讀完第7章組件的內容后，可以嘗試編寫一個下拉選擇器的通用組件。
6.2 綁定值
上一節(jié)介紹的單選按鈕、復選框和選擇列表在單獨使用或單選的模式下，v-model綁定的值是一個靜態(tài)字符串或布爾值。
但在業(yè)務中，有時需要綁定一個動態(tài)的數(shù)據(jù)，這時可以用v-bind來實現(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>
在選中時，app.picked===app.value，值都是123。
復選框：
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>復選框</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>
勾選時，app.toggle===app.value1；
未勾選時，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>
當選中時，app.selected是一個Object，所以app.selected.number===123。
6.3 修飾符
與事件的修飾符類似，v-model也有修飾符，用于控制數(shù)據(jù)同步的時機。
.lazy：
在輸入框中，v-model默認是在input事件中同步輸入框的數(shù)據(jù)(除了提示中介紹的中文輸入法情況外)。
使用修飾符.lazy會轉變?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并不是實時改變的，而是在失焦或按回車時才更新。
.number：
使用修飾符.number可以將輸入轉換為Number類型，否則雖然你輸入的是數(shù)字，但它的類型其實是String。
比如在數(shù)字輸入框時會比較有用，示例代碼如下：
<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可以自動過濾輸入的首尾空格，示例代碼如下：
<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開始，v-model還可以用于自定義組件，滿足定制化的需求，在下一節(jié)會介紹。
以上所述是小編給大家介紹的Vuejs學習筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
對axios進行封裝以及將API接口按業(yè)務模塊統(tǒng)一管理，有助于我們簡化代碼，方便后期維護。本文介紹了如何用vue封裝axios請求，感興趣的同學，可以參考下。2021-06-06
詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue前端實現(xiàn)導出頁面為pdf(分頁導出、不分頁導出及分模塊導出)
在實際應用中可能用戶希望將系統(tǒng)中一個頁面展示的所有數(shù)據(jù)報表,用PDF的文件格式下載下來,以便于其他用途,這篇文章主要給大家介紹了關于vue前端實現(xiàn)導出頁面為pdf(分頁導出、不分頁導出及分模塊導出)的相關資料,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue驗證碼60秒倒計時功能簡單實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
本文主要介紹了Vue腳手架配置代理服務器的兩種方式(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
vue2 拖動排序 vuedraggable組件的實現(xiàn)
這篇文章主要介紹了vue2 拖動排序 vuedraggable組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造
這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個屬性：navs 和 tts 屬性，具體實例代碼大家跟隨小編一起通過本文學習吧2018-09-09