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>
获取单选框的值,也是绑定同一个值,设置默认选项,就能获取到单选框的值。
获取的数据有多个值时,将对应的值设置为数组。