溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue.js的一大功能便是實現數據的雙向綁定，本文就表單處理時運用v-model指令實現雙向綁定做一個介紹：
v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據。這是通過設置屬性訪問器實現的。例如：
var data = {
name: "erik",
getName: function() {
return this.name;
},
setName: function(name) {
this.name = name;
}
};
上面的代碼中我們通過getName()和setName()方法作為訪問器，我們可以進一步嚴格限制（如借助Object.defineProperty方法）不直接訪問name這個屬性，所有對data.name的讀寫都必須通過data.getName()和data.setName()方法。此時我們改寫訪問器方法，添加對屬性值改變得到監控，便可以實現數據的雙向綁定。
那么在表單處理中我們具體如何使用v-model呢，先看看官方文檔給出的例子：
<form id="demo">
<!-- text -->
<p>
<input type="text" v-model="msg">
{{msg}}
</p>
<!-- checkbox -->
<p>
<input type="checkbox" v-model="checked">
{{checked ? "yes" : "no"}}
</p>
<!-- radio buttons -->
<p>
<input type="radio" name="picked" value="one" v-model="picked">
<input type="radio" name="picked" value="two" v-model="picked">
{{picked}}
</p>
<!-- select -->
<p>
<select v-model="selected">
<option>one</option>
<option>two</option>
</select>
{{selected}}
</p>
<!-- multiple select -->
<p>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
{{multiSelect}}
</p>
<p><pre>data: {{$data | json 2}}</pre></p>
</form>
對應的js：
new Vue({
el: '#demo',
data: {
msg : 'hi!',
checked : true,
picked : 'one',
selected : 'two',
multiSelect: ['one', 'three']
}
})
效果如下：
小伙伴們可以嘗試一下寫出這個頁面，在瀏覽器中當你調整上面表單元素的選中值時，你會發現下面打印的vue實例內容也會隨之改變，而如果你在代碼中改變vue實例data內容時渲染出來的表單選中值也會隨之改變。
另外，v-model這個指令還有幾個可選的參數：lazy,number,options,debounce
1.使用lazy參數是將雙向數據同步的時間節點從input觸發改為了change觸發，調用方式如下：
<!-- synced after "change" instead of "input" --> <input v-model="msg" lazy>
2.使用number參數是通知v-model綁定的dom元素把用戶輸入值默認當成數字來處理，調用如下：
<input v-model="age" number>
3.使用options參數是用于渲染一個select項的列表，調用方式如下：
<select v-model="selected" options="myOptions"></select>
其中options的參數名指向一個數組，該數組可以包括字符串或對象，對象可以是{text:'', value:''}的形式，指定了<option>的value屬性與text內容，例如：
[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
將渲染出：
<select> <option value="a">A</option> <option value="b">B</option> </select>
如果對象是{ label:'', options:[...] }的形式，則可以渲染出多個option組<optgroup>,如下例：
[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]
將渲染出：
<select> <optgroup label="A"> <option value="a">a</option> <option value="b">b</option> </optgroup> <optgroup label="B"> <option value="c">c</option> <option value="d">d</option> </optgroup> </select>
4.使用debounce參數是指定一個延遲時間，延遲從按鍵觸發到數據更新同步之間的時間，當我們的更新操作比較耗時時這個屬性十分有用，例如搜索引擎在我們鍵入字符時發送ajax請求完成自動補全提示，調用如下：
<input v-model="msg" debounce="500">
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
