Vue怎么設置單選按鈕

簡介

在Vue.js中設置單選按鈕（Radio Button）是一種常見的需求，尤其是在表單中。單選按鈕允許用戶從一組選項中選擇一個。Vue提供了一種簡單的方式來實現這一功能，通過使用v-model指令和v-for指令可以輕松地創建和管理單選按鈕。

基本用法

首先，我們需要在Vue組件中定義一個數據屬性來存儲選中的單選按鈕的值。然后，使用v-model指令將這個數據屬性綁定到單選按鈕的value屬性上。

HTML模板

Vue腳本

樣式

動態單選按鈕

如果你的單選按鈕選項是動態生成的，比如從API獲取，你可以使用相同的方法來設置單選按鈕。只需確保options數組是動態更新的即可。

單選按鈕組

在某些情況下，你可能需要將單選按鈕組織成一組，以便更好地管理它們。你可以使用v-for指令來遍歷選項，并為每組單選按鈕添加一個共同的屬性或類。

示例

  
{{ group.title }}
  

    
    {{ option.text }}
  

數據

data() {
  return {
    groups: [
      {
        id: 'group1',
        title: '分組1',
        selectedOption: null,
        options: [
          { value: 'group1-option1', text: '分組1選項1' },
          { value: 'group1-option2', text: '分組1選項2' }
        ]
      },
      // 可以添加更多的分組
    ]
  };
}

結論

Vue.js使得設置和管理單選按鈕變得簡單直觀。通過使用v-model和v-for，你可以輕松創建單選按鈕，并根據需要動態地更新它們。記得在實際項目中根據具體需求調整上述示例代碼。