網(wǎng)頁(yè)中常用的單選框，是通常是通過(guò)元素的checked屬性來(lái)實(shí)現(xiàn)的。當(dāng)我們需要在Vue中使用單選框時(shí)，可以使用v-model來(lái)綁定一個(gè)Boolean類(lèi)型的數(shù)據(jù)，將其與checked屬性綁定在一起。但是，當(dāng)需要將某個(gè)單選框的值傳到后端，并重新加載頁(yè)面時(shí)，我們就需要將選中的單選框回顯到頁(yè)面上。下面，我們介紹一種Vue單選回顯的方法。

假設(shè)我們有一個(gè)表單，其中包含三個(gè)單選框，如下所示：

紅色
綠色
藍(lán)色

在Vue實(shí)例中，我們定義一個(gè)數(shù)據(jù)項(xiàng)selected來(lái)綁定選中的單選框的值：

var vm = new Vue({
el: '#app',
data: {
selected: ''
}
});

為了讓選中的單選框的值回顯到頁(yè)面上，我們需要在頁(yè)面加載時(shí)，獲取表單中選中單選框的值，并將其賦值給Vue實(shí)例中的selected數(shù)據(jù)項(xiàng)。這里我們使用jquery庫(kù)的方法來(lái)獲取選中的值：

$(function () {
var selectedValue = $("input[type='radio'][name='color']:checked").val();
vm.selected = selectedValue;
});

當(dāng)頁(yè)面加載完成時(shí)，我們獲取選中的值，并將其傳給Vue實(shí)例。在Vue實(shí)例中，我們使用computed計(jì)算屬性來(lái)返回選中的單選框的值：

computed: {
color: function () {
return this.selected;
}
}

然后，我們?cè)趩芜x框的標(biāo)簽上使用v-bind指令，來(lái)綁定選中狀態(tài)的checked屬性：

這里使用了三目運(yùn)算符來(lái)判斷當(dāng)前單選框是否應(yīng)該是選中狀態(tài)。如果它的值與selected數(shù)據(jù)項(xiàng)的值相等，則檢查屬性checked；否則將其設(shè)置為false。

這樣，當(dāng)表單提交到后端，并重新刷新頁(yè)面時(shí)，選中的單選框的值就會(huì)回顯到頁(yè)面上了。這種方法也可以運(yùn)用到多選框上，只需要在數(shù)據(jù)項(xiàng)上綁定一個(gè)數(shù)組即可。