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

v-model

• 基本使用
• 修饰符
• .trim
• .number
• .lazy

前面讲到的插值，其实都是单向绑定，数据变——>视图变。有些元素可以与用户交互，比如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 事件进行同步数据。