vue2 v-model 绑定不同的表单元素，绑定不同表单元素的属性

• 输入框 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>