v model的理解與使用

步驟：

1、了解v-model的本質

2、了解v-model的使用方法

如下**，本質上是，其中@input是對輸入事件的乙個監聽:value="test"是將監聽事件中的資料放入到input，並且，v-model不僅可以給input賦值還可以獲取input中的資料，而且資料的獲取是實時的，因為語法糖中是用@input對輸入框進行監聽的。可以在如下div中加入}

獲取input資料，然後去修改input中資料會發現

中資料隨之改變，即v-model可以用於在表單控制項或者在元件上建立雙向繫結。

>
"test"
>
<
!-- "test" @input=
"test= $event.target.value"
>-->
<
!--語法糖-->

第一步：在頁面引入vue

第二步：表單控制項上使用v-model

如下面**，分別是v-model在input不同的元件中的應用，但是大體用法相同。注意：像下面**中核取方塊這樣需要接收多條資料的情況下，在data裡面應該由陣列與其對應二不是字串。

<
!--下拉框-->
>
"selected"
>
"a">a
"b">b
"c">c
selected: 
}

<
!--單選按鈕-->
>
"radio" id=
"a" value=
"aaaa" v-model=
"picked"
>
"a">a
"radio" id=
"b" value=
"bbbb" v-model=
"picked"
>
"b">b
picked: 
}

<
!--核取方塊-->
>
"checkbox" id=
"one" value=
"a" v-model.lazy=
"checkednames"
>
"one"
>選項一
"checkbox" id=
"two" value=
"b" v-model.lazy=
"checkednames"
>
"two"
>選項二
"checkbox" id=
"three" value=
"c" v-model.lazy=
"checkednames"
>
"three"
>選項三
checked: 
}new vue(
})

第三步（可選項）：v-model的修飾符使用

v-model也可以和.lazy、.trim、.number、.stop這些修飾符一起使用

< !-- 在每次 input 事件觸發後將輸入框的值與資料進行同步，新增 lazy 修飾符，從而轉變為使用 change 事件進行同步 --> "msg"

>

<
!--去除字串首尾的空格-->
"msg"
>

<
!--將資料轉化為值型別-->
"age" type=
"number"
>

<
!--阻止冒泡-->
"op" type=
"text"
>

以上便是我總結出來的vue中v-model的理解與使用，v-model是學習vue過程中的乙個基礎的知識點，雖然用法很簡單，但是它的原理和修飾符擴充套件卻也需要我們牢記。在學習過程中，我們也始終要保持乙個謙虛的態度，即便已經學有所成，也要對以前學過的知識不斷複習，已達到溫故知新的效果。學習，是乙個有苦到甜的過程，就如在逆戰班中學習的時候，雖然初學vue時很是艱苦，但是當乙個個知識點被自己理解透徹時，那種成功的喜悅卻是發自內心的。

v model的理解與使用

v model 語法糖理解

深入理解v model

Vue3 全域性 Api 與 v model 的使用

v model的理解與使用

v model 語法糖 理解

深入理解v model

Vue3 全域性 Api 與 v model 的使用

相關推薦

v model 語法糖理解