在編寫前端代碼時，單選框是經常需要用到的一種元素。在 Vue 中，我們可以通過 v-model 指令和 input 標簽來實現對單選框的控制。下面將介紹如何使用 Vue 控制單選框。

首先，在模板中我們需要定義單選框的值和默認選中的項，這可以通過定義一個 data 屬性來實現。

data() {
return {
radio: 'option1'
}
}

這里我們定義了一個名為 radio 的響應式數據，初始值為 option1。接下來，在模板中我們需要綁定 radio 變量到單選框的 value 屬性。

Option 1
Option 2
Option 3

這里我們使用了 v-model 指令來綁定 radio 變量到單選框。注意每個單選框都需要一個獨特的 value 值以便 Vue 能夠準確地檢測到哪個選項被選中。

現在，我們把 radio 變量和單選框綁定起來了，但是如何讓其在選中不同的單選框選項時顯示不同的內容呢？這里我們可以使用 computed 屬性。

computed: {
selectedOption() {
switch (this.radio) {
case 'option1':
return 'Option 1 selected';
case 'option2':
return 'Option 2 selected';
case 'option3':
return 'Option 3 selected';
default:
return '';
}
}
}

這里我們定義了一個 computed 屬性 selectedOption，該屬性返回 radio 的選項對應的文本。這里我們使用了 switch 語句來根據 radio 的值返回不同的文本。

最后，在模板中我們顯示選中的單選框選項的文本信息。這里我們可以通過渲染 selectedOption 屬性來實現。

{{ selectedOption }}

至此，我們已經掌握了如何在 Vue 中控制單選框。通過 v-model 綁定變量到單選框，并使用 computed 屬性渲染選中的單選框選項文本信息。