v-model 能轻松实现表单输入和应用状态之间的双向绑定 v-model 指令只能用在
<input>
<select>
<textarea>
等这些表单元素上
HTML部分
<div id="app">
<!-- value="msg" "msg"是一个字符串 -->
<!-- :或者v-bind 叫动态绑定 -->
<!-- :value="msg" msg是vue实例化对象里面的属性-->
<!-- <input type="text" v-bind:value="msg"> -->
<!-- v-model是原生value属性的语法糖
实际改的还是value 但是v-model做了一些其他的处理，
实现了双向数据绑定 -->
<!-- <input type="text" v-model="msg"> -->
<!-- <h1>{{msg}}</h1> -->
<!-- <select v-model="val">
<option value="">请选择</option>
<option value="001">奔驰</option>
<option value="002">宝马</option>
<option value="003">奥迪</option>
</select>
<h1>{{val}}</h1> -->
<!-- 单选框 -->
<h1>性别：</h1>
<input type="radio" name="a" v-model="sex" value="男">男
<input type="radio" name="a" v-model="sex" value="女">女
<h1>{{sex}}</h1>
<h1>爱好：</h1>
<input type="checkbox" v-model="arr" value="篮球">篮球
<input type="checkbox" v-model="arr" value="排球">排球
<h1>{{arr1}} {{arr2}}</h1>
<h1>{{arr}}</h1>
</div>
JS部分
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"123",
val:"",
sex:"",
arr1:"",
arr2:"",
arr:[]
}
})
</script>
