RadioGroup在Vue中怎么用

小樊
234
2024-07-02 16:12:44
欄目: 編程語言

在Vue中，可以使用v-model指令來綁定RadioGroup的值，并使用v-for指令循環(huán)渲染各個(gè)Radio選項(xiàng)。以下是一個(gè)示例：

<template>
  <div>
    <label v-for="(option, index) in options" :key="index">
      <input type="radio" :value="option" v-model="selectedOption">
      {{ option }}
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: ['Option 1', 'Option 2', 'Option 3']
    }
  }
}
</script>

在上面的示例中，我們通過v-model="selectedOption"綁定了RadioGroup的值，通過v-for="(option, index) in options"循環(huán)渲染了多個(gè)Radio選項(xiàng)。當(dāng)用戶選擇其中一個(gè)選項(xiàng)時(shí)，selectedOption的值會(huì)自動(dòng)更新，從而實(shí)現(xiàn)了RadioGroup的功能。

0 踩