Vue系列(六)之常用指令v-model

前面講到的插值，其實都是單向綁定，數據變——>視圖變。有些元素可以與用戶交互，比如input，select等，那麼我們希望隨着用戶的交互，對應的數據也發生改變。這樣數據變——>視圖變，並且視圖變——>數據變的綁定就是雙向綁定。

基本使用

v-model 指令在表單 input、textarea 及 select 元素上創建雙向數據綁定。以一個簡單的登錄demo來說明v-model的使用。

<form @submit.prevent>
   <div>
        <span>用戶名</span>
        <input v-model="username">
    </div>
    <div>
        <span>密碼</span>
        <input v-model="password">
    </div>
    <input type="submit" value="登錄" @click="login">
</form>

var vm = new Vue({
    el: '#app',
    data: {
        username: '',
        password: ''
    },
    methods: {
        login(){
            console.log(this.username);
            console.log(this.password);
        }
    }
});

username，password都是用v-model雙向綁定的，隨着用戶的輸入，data中的兩個字段也會變化，點擊登錄按鈕時，可以直接獲取到用戶輸入的值。

修飾符

.trim

去掉兩端的空格

.number

自動將用戶的輸入值轉爲數值類型

.lazy

在默認情況下，v-model 監聽input 事件。 lazy 修飾符改爲監聽 change 事件進行同步數據。