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