欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年03月20日 10:10:14   作者:BYRONIC  
這篇文章主要為大家詳細(xì)介紹了vue.js指令v-model的使用方法 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上,所謂雙向綁定,指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致,兩者無論誰被改變,另一方也會相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(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這個屬性,所有對data.name的讀寫都必須通過data.getName()和data.setName()方法。此時我們改寫訪問器方法,添加對屬性值改變得到監(jiān)控,便可以實現(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']
 }
})

效果如下:

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

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

1.使用lazy參數(shù)是將雙向數(shù)據(jù)同步的時間節(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ù)是用于渲染一個select項的列表,調(diào)用方式如下:

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

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

<input v-model="msg" debounce="500">

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論