vue中设置一组radio代码

最新推荐文章于 2024-07-20 16:46:53 发布

小只笨笨狗～

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量83

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51196135/article/details/140132785

版权

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

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1', value: 'option1' },
        { id: 2, label: 'Option 2', value: 'option2' },
        { id: 3, label: 'Option 3', value: 'option3' }
      ],
      selectedOption: ''
    };
  }
};
</script>