温馨提示×

RadioGroup在Vue中怎么用

小樊
266
2024-07-02 16:12:44
栏目: 编程语言

在Vue中,可以使用v-model指令来绑定RadioGroup的值,并使用v-for指令循环渲染各个Radio选项。以下是一个示例:

<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"循环渲染了多个Radio选项。当用户选择其中一个选项时,selectedOption的值会自动更新,从而实现了RadioGroup的功能。

0