1. 程式人生 > >Vue的表單元件之單選按鈕

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>