vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- v-bind:属性='变量' 不要{}
        v-model='变量';更多的是用在输入框之类的地方；
        输入框可以接受后台(.net/java)都可以给它传值；
        同样输入框也可以向后台传递值；这种情况就是双向绑定。
    -->
    <div id="app">
        <input type="text" placeholder="请输入邮箱" v-model="msg">
        <input type="radio" value="male" v-model="gender">男
        <input type="radio" value="female" v-model="gender">女
        <input type="checkbox" v-model="answer" value="A" />A
        <input type="checkbox" v-model="answer" value="B" />B
        <input type="checkbox" v-model="answer" value="C" />C
        <hr>
        <select v-model="edu" multiple>
            <!--multiple:可以多选-->
            <option value="博士">博士研究生</option>
            <option value="硕士">硕士研究生</option>
            <option value="本科">学士</option>
        </select>
        邮箱：{{msg}},性别：{{gender}},选择：{{answer}},{{answer.join('|')}},
        学历：{{edu}}
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'pony.ma',
                gender: 'male',
                answer: [],  //这里需要定义成数组
                edu: '本科'
            }
        });
    </script>
</body>

</html>

案例效果如下：

vue.js中的v-model指令的深刻理解_javascript

v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- lazy:默认是同步；lazy:当失去焦点onblur的时候，才同步
    .number:可以输入字母，输入完毕焦点离开，不能同步效果;
    .trim:删除前后空白字符，后面空白字符会把后面的字符给省略掉;
-->

<body>
    <div id="app">
        非延迟加载:<input type="text" v-model="val1" />
        延迟加载:<input type="text" v-model.lazy="val1" />
        数字限制：<input type="text" v-model.number="val2" />
        空白字符过滤：<input type="text" v-model.trim="val3" />
        {{val1}},数字：{{val2}},过滤空白字符{{val3}}
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                val1: 'one',
                val2: 2,
                val3: ""
            }
        });
    </script>
</body>

</html>

v-model的修饰符如下所示：

vue.js中的v-model指令的深刻理解_数据_02