v-model与单选框和多选框结合

1. v-model与单选框的碰撞
   想使用v-model来获取用户所选内容，要如何实现呢？
   这时我们应该想到单选框的原理：name属性，也就是将2个单选框的name设置成相同的

   <input type="radio" id="male"   value="男" name="sex">男  
   <input type="radio" id="female" value="女" name="sex">女

   显示效果如下：
   

v-model的使用和name的思想完全一致
将两个单选框的v-model设置为data中的相同值

<div id="app">
    <input type="radio" id="male" value="男" v-model="sex">男
    <input type="radio" id="female" value="女" v-model="sex">女
    <h2>您选择的性别是: {{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
     sex: ' '
    }
  })
</script>

显示效果如下：

2. v-model与多选框的碰撞
   思想和单选框的思想完全一致，不过单选框的v-model中对应的data的类型是字符串，多选框是数组
   直接上图

   <div id="app">
   <input type="checkbox" value="篮球" v-model="hobbies">篮球
   <input type="checkbox" value="足球" v-model="hobbies">足球
   <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
   <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
   <h2>您的爱好是: {{hobbies}}</h2>
   </div>
   <script src="../js/vue.js"></script>
   <script>
   const app = new Vue({
    el: '#app',
    data: {
      hobbies: [], // 多选框,
    }
   })
   </script>

   实现图如下：