前言：表单控件承载了一个网页数据的录入与交互。
下面介绍如何使用指令v-model完成表单的数据双向绑定。
一、基本用法——v-model
<div id="app">
<input type="text" v-model="message" placeholder="请输入"/>
<h1>{{ message }}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello World!‘
}
})
</script>
在输入框输入的同时，{{message}}的值也会实时渲染在视图中。
对于文本域也是同样的用法
提示：使用v-model后，表单数据显示的值只依赖与数据，不再关心初始时的value，对于textarea中间插入的值也不会生效
单选按钮
单选按钮在单独使用时，不需要使用v-model，直接用v-bind来绑定一个布尔类型的值，为真时选中，为否时不选中
<div id="app">
<input type="radio" :checked="picked"/>
<label>单选按钮</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
picked: true
}
})
</script>
如果是组合起来，实现互斥选择效果，就需要使用v-model搭配value来实现
<div id="app">
<div>
<input type="radio" v-model="picked" value="iphone" id="iphone" />
<label>iphone</label>
</div>
<div>
<input type="radio" v-model="picked" value="ipad" id="ipad" />
<label>ipad</label>
</div>
<div>
<input type="radio" v-model="picked" value="mac" id="mac" />
<label>mac</label>
</div>
<p>选择的值是：{{picked}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
picked: ‘‘
}
})
</script>
数据picked与单选按钮value的值一致时，就会选中。
复选框
复选框也分单独使用和组合使用，与单选按钮稍不同的是，复选框单独使用时，也是通过v-model来绑定一个布尔值
<div id="app">
<div>
<input type="checkbox" v-model="checkeds" />
<label>选择的值是{{checkeds}}</label>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
checkeds: true
}
})
</script>
在组合使用时，也是v-model与value一起，多个勾选框都绑定同一个数组类型的数据，value的值在这个数组中，就会选中这一项。这一过程也是双向绑定，在勾选时，value的值也会自动push到这个数组中。
<div id="app">
<div>
<input type="checkbox" v-model="checkeds" value="iphone" id="iphone" />
<label>iphone</label>
</div>
<div>
<input type="checkbox" v-model="checkeds" value="ipad" id="ipad" />
<label>ipad</label>
</div>
<div>
<input type="checkbox" v-model="checkeds" value="mac" id="mac" />
<label>mac</label>
</div>
<p>选择的项是：{{checkeds}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
checkeds: [‘mac‘]
}
})
</script>
下拉选择器
分为单选和多选两种方式。下面先看单选时
<div id="app">
<select v-model="selected">
<option value="1">iphone</option>
<option value="2">ipad</option>
<option>mac</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
selected: ‘2‘
}
})
</script>
如果optio有value,v-model就会优先匹配valu的值，如果没有value，v-model就会匹配text的值。
给select添加multiple属性就可以多选，此时v-model绑定的值是一个数组，与复选框的用法类似
<div id="app">
<select v-model="selected" multiple>
<option value="1">iphone</option>
<option value="2">ipad</option>
<option >mac</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
selected: [‘2‘,‘mac‘]
}
})
</script>
二、绑定值——v-bind
前面说到，v-model绑定的是一个静态的数据或者布尔值，实际业务中，有时需要绑定一个动态数据，此时就用v-bind来实现
单选按钮
<div id="app">
<input type="radio" :checked="picked" :value="val"/>
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{val}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
picked: true,
val:‘123‘
}
})
</script>
复选框
<div id="app">
<input
type="checkbox"
v-model="toggle"
:true-value="value1"
:false-value="value2"
/>
<label>复选框</label>
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
toggle: false,
value1:123,
value2:456
}
})
</script>
勾选时，app.toggle 等于app.value1,不勾选是app.toggle等于app.value2
下拉选择列表
<div id="app">
<select v-model="selected">
<option :value="{‘name‘:‘iphone‘}">iphone</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
selected: ‘‘
}
})
</script>
当勾选时，app.selected是一个obj
三、修饰符：
与事件的修饰符类似，用于控制数据同步的时机。
修饰符.lazy会转变为change事件中同步
<input type="text" v-model.lazy="message" >
这时message并不是实时改变的，而是在失焦或按回车时才会更新
修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但类型是String
<input type=“number” v-model.number=“message” >
原文：https://www.cnblogs.com/HeLingping/p/14547538.html