用v-model綁定單選框能帶來很多便捷的開發體驗。
基礎用法
Male
Femalea
{{gender}}
export default {
name: 'app',
data () {
return {
gender: ''
}
}
}
建立一個名為 gender 的資料模型，通過 v-model 把兩個單選按鈕都綁定 gender ，
也綁定了 gender ，是以單選按鈕選了哪項，都會把對應的 value 值賦給 gender ， 進而使
的内容也發生變化。
通過 v-model 綁定，Vue會幫我們解決分組問題。以前使用單選按鈕時，是需要設定 name 屬性的，現在用 v-model 的話，就不用設定 name 屬性了。
預設值
如果需要在頁面第一次加載的時候就有一個預設選項，可以在資料模型裡直接使用對應的 value 值。
比如希望頁面在第一次加載時預設選中 Male。
Male
Female
{{gender}}
export default {
name: 'app',
data () {
return {
gender: 'Male'
}
}
}
隻要把資料模型裡的 gender 的值改成“Male”即可。
當然，這個值是不能随便寫的。一般是需要寫上其中一個單選按鈕的 value 值。
如果随便寫一個字元串也不會報錯，最後的作用其實和空字元串一樣。
總結
以上所述是小編給大家介紹的vue 表單之通過v-model綁定單選按鈕radio,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！