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>
原理很简单 自己看代码即可