微信訂閱號(hào)：Rabbit_svip
用v-model綁定單選框能帶來(lái)很多便捷的開(kāi)發(fā)體驗(yàn)枉昏。
基礎(chǔ)用法
<template>
<div id="app">
<input type="radio" id="male" value="Male" v-model="gender"> Male
<input type="radio" id="female" value="Female" v-model="gender"> Femalea
<p>{{gender}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
gender: ''
}
}
}
</script>
微信訂閱號(hào)：Rabbit_svip
新建一個(gè)名為 gender 的數(shù)據(jù)模型，通過(guò) v-model 把兩個(gè)單選按鈕都綁定 gender 氏捞，<p> 也綁定了 gender 舷蟀，所以單選按鈕選了哪項(xiàng)，都會(huì)把對(duì)應(yīng)的 value 值賦給 gender 败明， 從而使 <p> 的內(nèi)容也發(fā)生變化隘马。
通過(guò) v-model 綁定，Vue會(huì)幫我們解決分組問(wèn)題妻顶。以前使用單選按鈕時(shí)酸员，是需要設(shè)置 name 屬性的，現(xiàn)在用 v-model 的話讳嘱，就不用設(shè)置 name 屬性了幔嗦。
默認(rèn)值
如果需要在頁(yè)面第一次加載的時(shí)候就有一個(gè)默認(rèn)選項(xiàng)，可以在數(shù)據(jù)模型里直接使用對(duì)應(yīng)的 value 值呢燥。
比如希望頁(yè)面在第一次加載時(shí)默認(rèn)選中 Male崭添。
<template>
<div id="app">
<input type="radio" id="male" value="Male" v-model="gender"> Male
<input type="radio" id="female" value="Female" v-model="gender"> Female
<p>{{gender}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
gender: 'Male'
}
}
}
</script>
只要把數(shù)據(jù)模型里的 gender 的值改成“Male”即可。
當(dāng)然叛氨，這個(gè)值是不能隨便寫(xiě)的呼渣。一般是需要寫(xiě)上其中一個(gè)單選按鈕的 value 值。
如果隨便寫(xiě)一個(gè)字符串也不會(huì)報(bào)錯(cuò)寞埠，最后的作用其實(shí)和空字符串一樣屁置。
