VUE 表單元素雙向繫結總結

2021-10-01 22:14:14 字數 2433 閱讀 1677

以下語法基於vue1.0

checkbox最基本用法:

new vue(

ready:function()})

規則1:如果v-model繫結的變數型別為boolean,若input被選中,this.inputdata為true,否則this.inputdata為false。

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

new vue(   

ready:function()

})

規則2:如果v-model繫結的變數型別為陣列,那麼繫結該變數的元素若被選中,把該元素的value值新增進陣列,若不被選中,那麼把該元素的value從陣列中去除。

所以在v-model繫結的變數型別是陣列的情況下,務必設定繫結該變數的每個元素的value值,且value值不要相等。見上例。

radio基本用法

new vue(

ready:function()

})

規則: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基本用法

ab

cselected: }

new vue(

})

規則: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-modelinput事件中同步輸入框值與資料,可以新增乙個特性lazy,input值發生改變時,不會同步到繫結的變數

//input值發生改變,msg不變

number

如果想自動將使用者的輸入轉為 number 型別(如果原值的轉換結果為 nan 則返回原值),可以新增乙個特性number

//預設輸入框內的值為字串,新增number,可以將輸入值轉換為數字在同步到age

debounce

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

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

vm.$watch(

})

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

若想延遲 dom 事件,應當使用debounce過濾器。 

debounce過濾器

//只要操作鍵盤間隔小於0.5秒,就不會發生onkeyup事件。

包裝處理器,讓它延遲執行xms, 預設延遲 300ms。包裝後的處理器在呼叫之後至少將延遲xms, 如果在延遲結束前再次呼叫,延遲時長重置為xms。

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

個人部落格傳送門》

Vue 表單元素繫結

文字框 輸入的內容繫結到 name text v model name 下拉框 資料從data的 tt 中讀取 選擇的結果繫結到 select value select value 0 請選擇 option for v,k in tt v bind key k value v.value optio...

VUE表單雙向繫結及校驗原理

就是繫結value值,監聽input事件 即,父元件通過props傳遞value值,子元件通過監聽input事件來 實時將value值通過 emit傳遞給父元件。export default type methods 首先確定校驗元件結構,主要有三層 頁面布局 指令碼部分 data rules pa...

Vue雙向繫結

把乙個普通物件 a 傳給 vue 例項作為它的 data 選項,vue.js 將遍歷它的屬性,用object.defineproperty 將它們轉為 getter setter,如圖綠色的部分所示。每次使用者更改data裡的資料的時候,比如a.b 1,setter就會重新通知watcher進行變動...