在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的功能。