單選按鈕在單獨(dú)使用時(shí)，不需要v-model，直接使用v-bind綁定

一個(gè)布爾類(lèi)型的值，為真時(shí)選中，為假時(shí)不選。

<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>

?

如果是組合使用來(lái)實(shí)現(xiàn)相互排斥的效果，就使用v-model來(lái)配合value來(lái)使用。

?<div id="app"><input type="radio" v-model="picked" value="學(xué)習(xí)" id="study"><label for="study">學(xué)習(xí)</label><br><input type="radio" v-model="picked" value="讀書(shū)" id="read"><label for="study">讀書(shū)</label><br><input type="radio" v-model="picked" value="運(yùn)動(dòng)" id="play"><label for="study">運(yùn)動(dòng)</label><br><p>選擇的選項(xiàng)是：{{picked}}</p></div> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。