Vue的表单组件之单选按钮

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定

一个布尔类型的值，为真时选中，为假时不选。

<div id="app">
  <input type="radio" :checked="picked"></input>
  <label>单选按钮</label>
 </div>

<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
 new Vue({
  el:'#app',
  data:{
   picked:true
  }
 })
</script>

如果是组合使用来实现相互排斥的效果，就使用v-model来配合value来使用。

 <div id="app">
  <input type="radio" v-model="picked" value="学习" id="study">
  <label for="study">学习</label><br>
  <input type="radio" v-model="picked" value="读书" id="read">
  <label for="study">读书</label><br>
  <input type="radio" v-model="picked" value="运动" id="play">
  <label for="study">运动</label><br>
  <p>选择的选项是：{{picked}}</p>
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
 new Vue({
  el:'#app',
  data:{
   picked:'study'
  }
 })
</script>