表單輸入繫結

2021-09-02 19:26:06 字數 1580 閱讀 7183

可以用 

v-model

指令在表單 

var vm1 = new vue(

})

(1)單個核取方塊,繫結到布林值

單個核取方塊

}

new vue(

})

(2)多個核取方塊,繫結到同一陣列

jack

john

mike

checked names:}

new vue(

})

one

twopicked:}

new vue(

})

(1)單選

請選擇ab

c    selected:}

new vue(

})

(2)多選——繫結到乙個陣列

abc

selected:}

new vue(

})

(3)用 

v-for

渲染的動態選項

}selected:}

new vue(,,]

}})

"selected"

>

"">

123// 當選中時

typeof

vm.selected

// => 'object'

vm.selected.number

// => 123

(1).lazy

在預設情況下,

v-model

在每次 

input

事件觸發後將輸入框的值與資料進行同步 (除了

上述

輸入法組合文字時)。你可以新增 

lazy

修飾符,從而轉變為使用 

change

事件進行同步:

"msg"

>

(2) .number

如果想自動將使用者的輸入值轉為數值型別,可以給 

v-model

新增 number

修飾符:

"age"

type=

"number"

>

這通常很有用,因為即使在 

type="number"

時,html 輸入元素的值也總會返回字串。如果這個值無法被 

parsefloat()

解析,則會返回原始的值。

(3) .trim

如果要自動過濾使用者輸入的首尾空白字元,可以給 

v-model

新增 trim

修飾符:

"msg"

>

表單輸入繫結

v model指定可以實現表單值與屬性的雙向繫結。即表單元素中更改了值會自動的更新屬性中的值,屬性中的值更新了會自動更新表單中的值。繫結的屬性和事件 v model在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件 text和textarea元素使用value屬性和input事件。checkbox...

vue表單輸入繫結

class v cloak type text v model inpval click add 增加button v for item in arr li ul v model textval name rows cols textarea p type checkbox name hobby i...

vue 表單輸入繫結

v model 指令在表單 input textarea select元素上建立雙向資料繫結 他會根據控制項型別自動獲取正確的放大來更新元素,text和textarea元素適應value屬性和input事件 checkbox和我radio使用checked屬性和change事件 select欄位將v...