本文介紹了VUE實(shí)現(xiàn)表單元素雙向綁定（總結(jié)） ，分享給大家，具體如下：

checkbox最基本用法:

<input type="checkbox" v-model="inputdata" checked/>
<input type="checkbox" v-model="inputdata"/>
<input type="checkbox" v-model="inputdata"/>
new Vue({
  el:".......",
  data:{
    inputdata:false //邏輯類型
  }
　　ready:function(){
　　　　console.log(this.inputdata)//true
　　}
})

規(guī)則1：如果v-model綁定的變量類型為boolean，若input被選中，this.inputdata為true,否則this.inputdata為false。

inputdata變量初始設(shè)置為false，但是在頁面進(jìn)行編譯時(shí)，因?yàn)榈谝粋€(gè)input為選中狀態(tài)，所以更新inputdata為true，那么渲染結(jié)束之后三個(gè)input均為選中狀態(tài)，且三個(gè)input狀態(tài)同步。

<input type="checkbox" value="a" v-model="inputdata" checked/>
<input type="checkbox" value="b" v-model="inputdata"/>
<input type="checkbox" value="c" v-model=""inputdata" checked/>
new Vue({ 
　　el:".......", 
　　data:{ 
　　　　inputdata:[]//數(shù)組類型
　　} 　　
　　ready:function(){ 　　　　
　　　　console.log(this.inputdata)//[a,c]
　　} 
})

規(guī)則2：如果v-model綁定的變量類型為數(shù)組，那么綁定該變量的元素若被選中，把該元素的value值添加進(jìn)數(shù)組，若不被選中，那么把該元素的value從數(shù)組中去除。

所以在v-model綁定的變量類型是數(shù)組的情況下，務(wù)必設(shè)置綁定該變量的每個(gè)元素的value值，且value值不要相等。見上例。

 radio基本用法

<input type="radio" value="a" v-model="inputdata" />
<input type="radio" value="b" v-model="inputdata" checked/>
<input type="radio" value="c" v-model="inputdata" checked/>

new Vue({
  el:".......",
  data:{
    inputdata:"a"
  }
　　ready:function(){
　　　　console.log(this.inputdata)// c
　　}
})

規(guī)則：v-model綁定的變量值如果等于input元素其中一個(gè)value值，那么該表單元素會(huì)被選中，如果不等于任何input的value值，所有相關(guān)元素不選中。同時(shí)如果選中某個(gè)input元素，那么該元素的value值就會(huì)被賦給該變量，頁面重新渲染。

如上，初始this.inputdata為"a"，在編譯到第二個(gè)input時(shí)，因?yàn)閷傩詾閏hecked表示選中，該元素value為"b",所以this.inputdata值為"b",然后編譯到第三個(gè)input時(shí)，同樣存在checked，所以this.inputdata為"c"。編譯結(jié)束后，this.inputdata值為"c"，頁面最終渲染效果為第三個(gè)被選中，前兩個(gè)未被選中。

select基本用法

<select v-model="selected">
 <option>A</option>
 <option selected>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

new Vue({
　　el:"....",
　　data:{
　　　　selelcted:"A"
　　}
})

規(guī)則：v-model綁定的變量值如果等于option元素其中一個(gè)value值，那么該元素會(huì)被選中。同時(shí)如果選中某個(gè)option元素，那么該元素的value值就會(huì)被賦給該變量。

如上，初始this.selected為"A"，在編譯到第二個(gè)option時(shí)，因?yàn)閷傩詾閟elected表示選中，該元素text值為"B"（如果option有value值,會(huì)優(yōu)先value值）,所以this.selected值為"B"。編譯結(jié)束后，this.slected值為"B"，頁面最終渲染效果為第二個(gè)被選中。如果是可多選select下拉框，規(guī)則基本同checkbox的規(guī)則2

屬性基本用法

lazy

在默認(rèn)情況下，v-model 在input 事件中同步輸入框值與數(shù)據(jù)，可以添加一個(gè)特性lazy，input值發(fā)生改變時(shí)，不會(huì)同步到綁定的變量

<input type="text" v-model="msg" lazy>//input值發(fā)生改變，msg不變

number

如果想自動(dòng)將用戶的輸入轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個(gè)特性 number：

debounce

設(shè)置一個(gè)最小的延時(shí)，在每次敲擊之后延時(shí)同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如在輸入提示中 Ajax 請(qǐng)求），它較為有用.

<input v-model="msg" debounce="500">//輸入內(nèi)容0.5秒后同步到msg

vm.$watch({
　　'msg':function(val,oldval){
　　　　　　
　　}
})

注意 debounce 參數(shù)不會(huì)延遲 input 事件：它延遲“寫入”底層數(shù)據(jù)(所以不適合ajax請(qǐng)求事件)。因此在使用debounce 時(shí)應(yīng)當(dāng)用 vm.$watch() 響應(yīng)數(shù)據(jù)的變化。

若想延遲 DOM 事件，應(yīng)當(dāng)使用debounce過濾器。

debounce過濾器

包裝處理器，讓它延遲執(zhí)行 x ms， 默認(rèn)延遲 300ms。包裝后的處理器在調(diào)用之后至少將延遲 x ms， 如果在延遲結(jié)束前再次調(diào)用，延遲時(shí)長(zhǎng)重置為 x ms。

用此過濾器非常適合做ajax請(qǐng)求

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

最新評(píng)論