快捷導(dǎo)航

vue.js指令v-model使用方法

更新時(shí)間：2017年03月20日 10:10:14 作者：BYRONIC

這篇文章主要為大家詳細(xì)介紹了vue.js指令v-model的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，本文就表單處理時(shí)運(yùn)用v-model指令實(shí)現(xiàn)雙向綁定做一個(gè)介紹：

v-model這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實(shí)現(xiàn)的。例如：

var data = {
 name: "erik",
 getName: function() {
  return this.name;
 },
 setName: function(name) {
  this.name = name;
 }
};

上面的代碼中我們通過getName()和setName()方法作為訪問器，我們可以進(jìn)一步嚴(yán)格限制（如借助Object.defineProperty方法）不直接訪問name這個(gè)屬性，所有對data.name的讀寫都必須通過data.getName()和data.setName()方法。此時(shí)我們改寫訪問器方法，添加對屬性值改變得到監(jiān)控，便可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

那么在表單處理中我們具體如何使用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>

對應(yīng)的js：

new Vue({
 el: '#demo',
 data: {
 msg  : 'hi!',
 checked : true,
 picked : 'one',
 selected : 'two',
 multiSelect: ['one', 'three']
 }
})

效果如下：

小伙伴們可以嘗試一下寫出這個(gè)頁面，在瀏覽器中當(dāng)你調(diào)整上面表單元素的選中值時(shí)，你會(huì)發(fā)現(xiàn)下面打印的vue實(shí)例內(nèi)容也會(huì)隨之改變，而如果你在代碼中改變vue實(shí)例data內(nèi)容時(shí)渲染出來的表單選中值也會(huì)隨之改變。

另外，v-model這個(gè)指令還有幾個(gè)可選的參數(shù)：lazy,number,options,debounce

1.使用lazy參數(shù)是將雙向數(shù)據(jù)同步的時(shí)間節(jié)點(diǎn)從input觸發(fā)改為了change觸發(fā)，調(diào)用方式如下：

<!-- synced after "change" instead of "input" -->
<input v-model="msg" lazy>

2.使用number參數(shù)是通知v-model綁定的dom元素把用戶輸入值默認(rèn)當(dāng)成數(shù)字來處理，調(diào)用如下：

<input v-model="age" number>

3.使用options參數(shù)是用于渲染一個(gè)select項(xiàng)的列表，調(diào)用方式如下：

<select v-model="selected" options="myOptions"></select>

其中options的參數(shù)名指向一個(gè)數(shù)組，該數(shù)組可以包括字符串或?qū)ο螅瑢ο罂梢允莧text:'', value:''}的形式，指定了<option>的value屬性與text內(nèi)容，例如：

[
 { text: 'A', value: 'a' },
 { text: 'B', value: 'b' }
]

將渲染出：

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

如果對象是{ label:'', options:[...] }的形式，則可以渲染出多個(gè)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參數(shù)是指定一個(gè)延遲時(shí)間，延遲從按鍵觸發(fā)到數(shù)據(jù)更新同步之間的時(shí)間，當(dāng)我們的更新操作比較耗時(shí)時(shí)這個(gè)屬性十分有用，例如搜索引擎在我們鍵入字符時(shí)發(fā)送ajax請求完成自動(dòng)補(bǔ)全提示，調(diào)用如下：