前端開發(fā)中，組合框（select）是一種常見的表單控件。在很多情況下，我們希望用戶只能選中單個選項，這時候就需要使用單選框（radio button）。在 Vue 中實現(xiàn)單選框的功能非常簡單，只需要用到 v-model 和 v-bind 兩個指令即可。

首先，在 html 中使用 input 標(biāo)簽創(chuàng)建單選框：

<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">選項1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">選項2</label>
<input type="radio" id="option3" value="option3" v-model="selectedOption">
<label for="option3">選項3</label>

在上面的代碼中，input 標(biāo)簽的 type 屬性設(shè)置為 radio，這樣它就變成了單選框。對于每個單選框，我們設(shè)置了一個不同的 id，用于和其對應(yīng)的 label 標(biāo)簽連接在一起。在 input 標(biāo)簽中，我們使用 v-model 指令將選中的值綁定到了 Vue 實例的 selectedOption 屬性上。

接著，在 Vue 實例中定義 selectedOption 屬性：

new Vue({
el: '#app',
data: {
selectedOption: ''
}
})

在數(shù)據(jù)對象中，我們定義了一個空字符串，它將用于記錄選中的選項的值。此時，selectedOption 屬性并沒有被設(shè)置為任何一個選項的值。

最后，我們還需要為單選框綁定 value 屬性，以記錄其對應(yīng)的值。例如：

<input type="radio" id="option1" value="option1" v-model="selectedOption">

在上面的代碼中，input 標(biāo)簽的 value 屬性設(shè)置為 option1，這樣被選中的單選框所對應(yīng)的 selectedOption 屬性的值就會自動變成 option1。當(dāng)選中其他單選框時，selectedOption 屬性的值也會同步更新。

如果我們想要渲染更多選項，只需要根據(jù)上面的方法添加更多的 input 標(biāo)簽即可：

<input type="radio" id="option4" value="option4" v-model="selectedOption">
<label for="option4">選項4</label>
<input type="radio" id="option5" value="option5" v-model="selectedOption">
<label for="option5">選項5</label>
<input type="radio" id="option6" value="option6" v-model="selectedOption">
<label for="option6">選項6</label>

在這個例子中，我們可以通過 v-model 和 v-bind 指令非常輕松地實現(xiàn)單選框的功能。通過將選中的值綁定到 Vue 實例中的一個屬性上，我們可以方便地處理用戶的選擇行為，也可以根據(jù)用戶的選擇對頁面進行相應(yīng)的處理。