v-model结合radio类型使用

 

为了使之互斥，两个单选框都添加name=“sex”，从而改变二者可以同时选择的情况

同一对的for与id内容需要相等 

添加v-model，使sex值随着点击的单选框而变化

当v-model绑定相同时，此时单选框互斥，此时的name可以省略

如果sex值写作男，单选框默认选中男

<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          sex:"男"
        }
  })
</script>