Vue自带一个特别神奇的指令，v-model可以实现表单元素的值得双向数据绑定，看演示：

代码实现：

<input type="text" v-model="msg">
<p>{{msg}}</P>

当改变input的值，对应的p标签的值也会发生改变，修改p标签的值，input里面的值也会发生改变。

<div id="example-3">
    <input type="checkbox" id="jack" value="JACK" v-model="checkNames">
    <label for="jack">JACK</label>
    <input type="checkbox" id="tony" value="Tony" v-model="checkNames">
    <label for="tony">Tony</label>
    <input type="checkbox" id="kaiwen" value="Kaiwen" v-model="checkNames">
    <label for="kaiwen">Kaiwen</label>
    <br>
    <p>checkNames : {{checkNames}}</p>
</div>

<script>
	var vm = new Vue({
		el:"绑定的元素",
		data:{
			checkNames:[],
		}
	})
</script>

多选框，给每个多选框绑定同一个值，设置成数组，能获取到复选框所选的值。

<div id="example-4">
    <input type="radio" id="man" value="male" v-model="sex">
    <label for="man">男</label>
    <input type="radio" id="woman" value="female" v-model="sex">
    <label for="woman">女</label>
    <br>
    <p>性别 : {{sex}} </p>
</div>
<script>
	var vm = new Vue({
		el:"绑定的元素",
		data:{
			sex:"male",
		}
	})
</script>

获取单选框的值，也是绑定同一个值，设置默认选项，就能获取到单选框的值。

获取的数据有多个值时，将对应的值设置为数组。