VUE實現表單元素雙向繫結（總結），vue表單元素繫結

VUE實現表單元素雙向繫結（總結），vue表單元素繫結

本文介紹了VUE實現表單元素雙向繫結（總結） ，分享給大家，具體如下：

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　　}})

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

inputdata變數初始設定為false，但是在頁面進行編譯時間，因為第一個input為選中狀態，所以更新inputdata為true，那麼渲染結束之後三個input均為選中狀態，且三個input狀態同步。

<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:[]//數群組類型　　} 　　　　ready:function(){ 　　　　　　　　console.log(this.inputdata)//[a,c]　　} })

規則2：如果v-model綁定的變數類型為數組，那麼綁定該變數的元素若被選中，把該元素的value值添加進數組，若不被選中，那麼把該元素的value從數組中去除。

所以在v-model綁定的變數類型是數組的情況下，務必設定綁定該變數的每個元素的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　　}})

規則：v-model綁定的變數值如果等於input元素其中一個value值，那麼該表單元素會被選中，如果不等於任何input的value值，所有相關元素不選中。同時如果選中某個input元素，那麼該元素的value值就會被賦給該變數，頁面重新渲染。

如上，初始this.inputdata為"a"，在編譯到第二個input時，因為屬性為checked表示選中，該元素value為"b",所以this.inputdata值為"b",然後編譯到第三個input時，同樣存在checked，所以this.inputdata為"c"。編譯結束後，this.inputdata值為"c"，頁面最終渲染效果為第三個被選中，前兩個未被選中。

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"　　}})

規則：v-model綁定的變數值如果等於option元素其中一個value值，那麼該元素會被選中。同時如果選中某個option元素，那麼該元素的value值就會被賦給該變數。

如上，初始this.selected為"A"，在編譯到第二個option時，因為屬性為selected表示選中，該元素text值為"B"（如果option有value值,會優先value值）,所以this.selected值為"B"。編譯結束後，this.slected值為"B"，頁面最終渲染效果為第二個被選中。如果是可多選select下拉框，規則基本同checkbox的規則2

屬性基本用法

lazy

在預設情況下，v-model 在input 事件中同步輸入框值與資料，可以添加一個特性lazy，input值發生改變時，不會同步到綁定的變數

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

number

如果想自動將使用者的輸入轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個特性 number：

複製代碼 代碼如下:
<input v-model="age" number>//預設輸入框內的值為字串，添加number，可以將輸入值轉換為數字在同步到age

debounce

設定一個最小的延時，在每次敲擊之後延時同步輸入框的值與資料。如果每次更新都要進行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用.

<input v-model="msg" debounce="500">//輸入內容0.5秒後同步到msgvm.$watch({　　'msg':function(val,oldval){　　　　　　　　}})

注意 debounce 參數不會延遲 input 事件：它延遲“寫入”底層資料(所以不適合ajax請求事件)。因此在使用debounce 時應當用 vm.$watch() 響應資料的變化。

若想延遲 DOM 事件，應當使用debounce過濾器。

debounce過濾器

複製代碼 代碼如下:
<input @keyup="onKeyup | debounce 500">//只要操作鍵盤間隔小於0.5秒，就不會發生onKeyup事件。

封裝處理器，讓它順延強制 x ms， 預設延遲 300ms。封裝後的處理器在調用之後至少將延遲 x ms， 如果在延遲結束前再次調用，延遲時間長度重設為 x ms。

用此過濾器非常適合做ajax請求

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。