表单是前端中用到非常多的部分，这里将用vue实现数据的双向绑定。
可以用 v-model 指令在表单控件元素上创建双向数据绑定。
输入框input和文本域textarea
使用v-model进行双向绑定数据，即一边的数据发生变化，另一边的数据也发生变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>用户名：{{username}}</p>
<input type="password" v-model="password" />
<p>密码：{{password}}</p>
<textarea rows="10" cols="15" v-model="memo"></textarea>
<p>备注：{{memo}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
username: "张三",
password: "123456",
memo: "我是一个好人!"
}
});
</script>
</body>
</html>
浏览器显示：
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 单个复选框 -->
<input type="checkbox" v-model="checked">
<p>选中的值为：{{checked}}</p>
<!-- 多个复选框 -->
<input type="checkbox" value="唐僧" v-model="checkedNames" />唐僧
<input type="checkbox" value="孙悟空" v-model="checkedNames" />孙悟空
<input type="checkbox" value="猪八戒" v-model="checkedNames" />猪八戒
<input type="checkbox" value="沙僧" v-model="checkedNames" />沙僧
<input type="checkbox" value="小白龙" v-model="checkedNames" />小白龙
<p>选中的值为：{{checkedNames}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
checked: false,
checkedNames: []
}
});
</script>
</body>
</html>
浏览器展示：
单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
<p>选中值为：{{sex}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
sex: "男"
}
});
</script>
</body>
</html>
浏览器展示：
下拉列表框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 下拉列表框的双向数据绑定 -->
<select v-model="selected" name="group">
<option value="">请选择...</option>
<option value="唐僧">唐僧</option>
<option value="孙悟空">孙悟空</option>
<option value="猪八戒">猪八戒</option>
<option value="沙僧">沙僧</option>
</select>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
// 默认选中"沙僧",如果为空则选中第一项
selected: "沙僧"
}
});
</script>
</body>
</html>
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >.number
自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。
<input v-model.number="age" type="number">.trim
自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入.
<input v-model.trim="msg">