• 输入框 input:text --> value
• 文本域 textarea --> value
• 复选框 input:checkbox --> checked
• 单选框 input:radio --> checked
• 下拉菜单 select–> value

1、绑定输入框

input type='text' / 'password' / 'number'

<!--绑定的是 type='text' / password 的 value值 --> 
<div id ="root"> <!-- trim修饰符去除前后空白 -->用户名：<input type="text" v-model.trim="username" />密码：  <input type="password" v-model="password" /><!-- number将字符串转为数据 -->年龄：  <input type="number" v-model.number="age" /></div> <script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script><script>let vm = new Vue({el: '#root',data(){return {username:'',password:'',age:''}},})</script>

2、绑定单选框

input type="radio"

<div id ="root"> <!-- 单选框使用v-model绑定同一个属性时，checked属性会失效，name属性可以省略，但是value属性必须要有 当 v-model 的属性值与某个单选框的 value 值相等时，Vue.js 会自动设置该单选框为选中状态 -->
性别：男：<input type="radio" name="sex" checked value="1" v-model="gender" /> 女：<input type="radio" name="sex" value="0" v-model="gender" />
</div> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {gender:''}},})
</script>

3、单个复选框绑定

input type="checkbox"

    <!-- 单个复选框，绑定到布尔值,不能配置value值，需要拿到的是checkbox的状态是否被选中，选中时agree变为true，取消选中变为false，agree变为true，复选框选中，agree变为false，复选框也会取消选中 -->
<div id ="root"> <input type="checkbox" v-model="agree" />阅读并接收协议
</div> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {agree:''}},})
</script>

4、多个复选框绑定

input type="checkbox"

<!-- 多个复选框，绑定到同一个数组，value属性必需要有,选中的复选框，value值会加入到数组中，数组中的值与其中一个复选框相同，这个复选框也会被选中 -->
<div id ="root"> 
爱好：运动：<input type="checkbox"  value="sport" v-model="hobby" />旅游：<input type="checkbox"  value="traver" v-model="hobby" />唱歌：<input type="checkbox"  value="song" v-model="hobby" />
</div> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {hobby:[],}},})
</script>

5、绑定文本域

<textarea>

    <!--文本域，绑定的是value值-->
<div id ="root"> <textarea cols="30" rows="10" v-model="texts"></textarea>
</div>  
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {texts:''}},})
</script>

6、绑定单选下拉框

<select>

    <!-- 下拉框选选中的项的value值会传给绑定的属性，属性值与其中一项的value值相等时，对应的项会被选中 -->
<div id ="root"> 
学历：<select v-model="grade"><option value="gz">高中</option><option value="zk">专科</option><option value="bk">本科</option><option value="sh">硕士</option></select></div> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {grade:''}},})
</script>

7、绑定多选下拉框

<select multiple>

   <!-- 多选时 (绑定到一个数组) -->
<div id ="root"> 
学历：<select v-model="grade" multiple><option value="gz">高中</option><option value="zk">专科</option><option value="bk">本科</option><option value="sh">硕士</option></select></div> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
<script>let vm = new Vue({el: '#root',data(){return {grade:''}},})
</script>