v-model 这个指令用于双向绑定 input 的值，比如下面有个 输入框，他的值就可以用v-model 来绑定：
<div id="app"><input type="text" v-model = "message"><h2>{{message}}</h2></div><script>const app = new Vue({el:"#app",data:{message:"您好！ BiHu！"}})</script>
你会发现 当你修改 输入框中的值的时候 ，底下的 标题也会跟着改变，因为这就是 "双向绑定"，即 data 中的 message 修改 那么input的值也修改，当input 的值修改，data中的message也一样修改。
其实它的原理我们也可以做：
无非就是 v-bind 绑定 + 一个input 事件触发：
<div id="app"><input type="text" :value="message" @input="message = $event.target.value" ><h2>{{message}}</h2></div>
当然，我们也可以将v-model用于textarea元素【自己测试】
v-model 绑定 radio 使用：
如果我们用单选框 选择性别：
<div id="app"><label for="M"><input id="M" type="radio" value="男" name="sex"> 男</label><label for="F"><input id="F" type="radio" value="女" name="sex"> 女</label><!-- 要达到互斥的效果 单选框的name需要一致 --></div>
普通的选择代码就这样 ，注意 要达到互斥的效果 单选框的name需要一致 这些都是基础 你得懂。
如果你用v-model 去绑定：
<div id="app"><label for="M"><input id="M" type="radio" value="男" v-model="sex"> 男</label><label for="F"><input id="F" type="radio" value="女" v-model="sex"> 女</label><h3>如果你用V-model绑定了值 sex，那么 你选择的sex是：{{sex}}<br>而且你可以name属性 即可达到互斥的效果</h3></div><script>const app = new Vue({el:"#app",data:{sex:"" //此时的sex为空 当然你想有默认值的话 可以是 男/女 ｛即radio的value｝}})</script>
功能我都一次性说完了。总结以下几点：
1. 可以不用name属性达到互斥单选
2.绑定后 可以随时用 胡须语法 查看选中的值
3.默认值可以直接在 绑定的变量中写 ，不用写原生checked 属性.
5.响应式改变 sex的值 达到选中
v-model 绑定checkbox 复选框：
这个复选框 原始的话 如果你选中 他的checked 属性是为真的 ，反之为假：
我们来个例子(勾选已详细阅读 后 才能进入下一步操作):
<div id="app"><div>软件使用说明书<br>xxxx............... <br> xxxx............. <br> <br></div><label><input type="checkbox" v-model="already" ><!--因为是双向绑定 所以按下 already为true--><span style="color: fuchsia"><b>已详细阅读</b></span></label><br><br><button :disabled="!already">下一步</button> </div><script>const app = new Vue({el:"#app",data:{already:false //一开始肯定是没阅读的}})</script>
你还可以打印一下 already 的值 会是 true 、 false 的。
这个是单个 而且绑定的变量初始化是 boolean型的 ，如果是多选框，那么就有特性要理清楚：
<div id="app"><label><input type="checkbox" value="篮球" v-model="hobby" > 篮球 <!--因为是双向绑定 所以按下 vue检测到v-model 绑定的类型是什么作出响应操作--></label><label><input type="checkbox" value="羽毛球" v-model="hobby" > 羽毛球</label><label><input type="checkbox" value="跑步" v-model="hobby" > 跑步</label><label><input type="checkbox" value="跆拳道" v-model="hobby" > 跆拳道</label><h3> {{hobby}} </h3><!--打印一下hobby--></div><script>const app = new Vue({el:"#app",data:{already:false,//注意 already 是boolean型hobby:[] //注意 hobby 是数组}})</script>
看代码可知，如果你绑定的是变量类型是 boolean 他就帮你操作 选中、未选中，但是如果是数组 他就帮你把这个 复选框的值 添加进去。
我发现 如果他识别不出你是什么类型【其他类型】 默认都按boolean来
v-model 绑定 select 选择框：
<div id="app"><h3>请选择你喜欢吃的水果:</h3><select name="fruit" id="fruit" v-model="fruit"><!--注意啊 是在这里用v-model--><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="菠萝">菠萝</option><option value="木瓜">木瓜</option></select><h3>{{fruit}}</h3> <!--打印一下--></div><script>const app = new Vue({el:"#app",data:{fruit:'香蕉', //可以调初始值 也可以为空(为空默认第一个)}})</script>
当绑定的类型是 字符串 可以指定 值，但是 要对应 option 的 value 即可！！！
我们还可以多选 配和 数组 ，多选可以添加到数组中：
<div id="app"><h3>请选择你喜欢吃的水果:</h3><select name="fruit" id="fruit" v-model="fruits" multiple><!--name 和 id 你自己换 /// multiple是多选属性 按住ctrl即可--><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="菠萝">菠萝</option><option value="木瓜">木瓜</option></select><h3>{{fruits}}</h3> <!--打印一下数组--></div><script>const app = new Vue({el:"#app",data:{fruit:'香蕉', //可以调初始值 也可以为空(为空默认第一个)fruits:[]//这是个数组类型}})</script>
这个不怎么常用，会用即可
值绑定
其实这个原理就是 先定义好input的值，然后你把它遍历出来，通过绑定渲染出不同的值 和 不同的属性：
<div id="app"><h3>请选择你喜欢的运动:</h3><label v-for="item in hobby" :id="item"><input type="checkbox" :value="item" v-model="choice">{{item}}</label><h3>您已选择：{{choice}}</h3></div><script>const app = new Vue({el:"#app",data:{hobby:["跑步","游泳","跆拳道","睡觉"],//运动是可变的，如果你写在input 那么就写死了choice:[], //已选择会存储在这}})</script>
原理很简单 自己看代码即可
