5.1.5　值綁定

通常情況下，對(duì)于text、radio、select組件，通過v-model綁定的值都是字符串。checkbox除外，checkbox值可能是布爾值。有時(shí)我們會(huì)有動(dòng)態(tài)綁定Vue.js實(shí)例屬性的需求，這時(shí)可以使用v-bind來實(shí)現(xiàn)這個(gè)需求（通過v-bind來代替直接使用value屬性）。我們還可以綁定非字符串的值，如數(shù)值、對(duì)象、數(shù)組等。

v-model用來在View與Model之間同步數(shù)據(jù)，但是有時(shí)候需要控制同步發(fā)生的時(shí)機(jī)，或者在數(shù)據(jù)同步到Model前將數(shù)據(jù)轉(zhuǎn)換為Number類型。此時(shí)，可以在v-model指令所在的form控件上添加相應(yīng)的修飾指令來實(shí)現(xiàn)這個(gè)需求。v-model修飾指令有以下幾個(gè)。

1．lazy

在默認(rèn)情況下，v-model在input中同步輸入框的值與數(shù)據(jù)，可以添加一個(gè)lazy特性，從而改為在change事件中去同步。代碼如下：

    <input v-model="msg" lazy>
    {{msg}}

2．debounce

設(shè)置一個(gè)最小的延時(shí)，在每次敲擊后延時(shí)同步輸入框的值到Model中。如果每次更新都要進(jìn)行高耗操作（例如，在提示中輸入Ajax請(qǐng)求），它較為有用。代碼如下：

    <input v-model="msg" debounce="300">

上述代碼表示，在用戶輸入完畢300ms后，vm.msg才會(huì)被更新。

提示：該指令是用來延遲同步用戶輸入的數(shù)據(jù)到Model中，并不會(huì)延遲用戶輸入事件的執(zhí)行。因此，如果想要獲取變化后的數(shù)據(jù)，應(yīng)該使用vm.$watch()來監(jiān)聽msg的變化，而不是在事件中獲取最新數(shù)據(jù)。

3．number

當(dāng)傳給后端的字段類型必須是數(shù)值的時(shí)候，可以在v-model所在控件上使用number指令（該指令會(huì)在用戶輸入時(shí)被同步到Model中，將其轉(zhuǎn)換為數(shù)值類型）。如果轉(zhuǎn)換結(jié)果為NaN，則對(duì)應(yīng)的Model值還是用戶輸入的原始值。代碼如下：

    <input v-model="age" number>