Vue的表單元件之單選按鈕
阿新 • • 發佈:2019-02-18
單選按鈕在單獨使用時,不需要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>