這篇文章給大家分享的是有關VUE如何實現(xiàn)表單元素雙向綁定的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務有：網(wǎng)站制作、網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、墨江ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的墨江網(wǎng)站制作公司

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

checkbox最基本用法:

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變量初始設置為false，但是在頁面進行編譯時，因為第一個input為選中狀態(tài)，所以更新inputdata為true，那么渲染結束之后三個input均為選中狀態(tài)，且三個input狀態(tài)同步。

new Vue({ 
　　el:".......", 
　　data:{ 
　　　　inputdata:[]//數(shù)組類型
　　} 　　
　　ready:function(){ 　　　　
　　　　console.log(this.inputdata)//[a,c]
　　} 
})

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

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

 radio基本用法

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

規(guī)則：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基本用法

 A
 B
 C



Selected: {{ selected | json }}

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

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

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

屬性基本用法

lazy

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

//input值發(fā)生改變，msg不變

number

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

//默認輸入框內的值為字符串，添加number，可以將輸入值轉換為數(shù)字在同步到age

debounce

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

//輸入內容0.5秒后同步到msg

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

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

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

debounce過濾器

//只要操作鍵盤間隔小于0.5秒，就不會發(fā)生onKeyup事件。

包裝處理器，讓它延遲執(zhí)行 x ms， 默認延遲 300ms。包裝后的處理器在調用之后至少將延遲 x ms， 如果在延遲結束前再次調用，延遲時長重置為 x ms。

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

感謝各位的閱讀！關于“VUE如何實現(xiàn)表單元素雙向綁定”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！