當我們需要讓用戶從幾個選項中選擇一個時，單選按鈕是一個很常用的UI組件。Vue提供了一個方便的方式來管理單選按鈕的選中狀態(tài)。

<template>
<div>
<input type="radio" name="fruit" value="apple" v-model="selectedFruit">
<label>Apple</label>
<input type="radio" name="fruit" value="banana" v-model="selectedFruit">
<label>Banana</label>
<input type="radio" name="fruit" value="strawberry" v-model="selectedFruit">
<label>Strawberry</label>
<div>Selected fruit: {{selectedFruit}}</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedFruit: ''
}
}
}
</script>

在這個例子中，我們有三個單選按鈕，每個單選按鈕都有一個value屬性來表示它的值，所有單選按鈕都有相同的name屬性來保證它們是一組。我們使用v-model指令來把selectedFruit屬性綁定到這組單選按鈕中的選中狀態(tài)。當用戶選擇一個單選按鈕時，selectedFruit屬性的值會被更新為所選的值。

當用戶首次訪問這個頁面時，selectedFruit屬性的值是空的。這對于多選按鈕也是適用的，如果沒有任何一個選項被選中，則v-model屬性值將是null。

如果你想在頁面加載時設置一個默認的選項，只需把selectedFruit屬性設置為所需的值即可：

<script>
export default {
data() {
return {
selectedFruit: 'apple'
}
}
}
</script>

當用戶首次加載頁面時，“Apple”單選按鈕將會被選中（v-model屬性值等于“apple”），這將自動生成“apple”屬性值。

可以注意到，在這個例子中，我們沒有使用任何JavaScript來處理選項的選擇。我們只是把v-model指令綁定到selectedFruit屬性，Vue會自動處理其余。

最終結(jié)果類似于這樣：