單選按鈕在單獨使用時，不需要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>

總結

以上是生活随笔為你收集整理的Vue的表单组件之单选按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。