Vue&elementui动态渲染Radio,Checkbox,笔记

<template>
  <div>
    <el-radio-group v-model="radioValue">
      <el-radio
        v-for="item in radioOptions"
        :key="item.value"
        :label="item.value">
        {{ item.label }}
      </el-radio>
    </el-radio-group>
 
    <el-checkbox-group v-model="checkboxValues">
      <el-checkbox
        v-for="item in checkboxOptions"
        :key="item.value"
        :label="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      radioValue: '1',
      checkboxValues: ['1', '3'],
      radioOptions: [
        { label: 'Radio 1', value: '1' },
        { label: 'Radio 2', value: '2' }
      ],
      checkboxOptions: [
        { label: 'Checkbox 1', value: '1' },
        { label: 'Checkbox 2', value: '2' },
        { label: 'Checkbox 3', value: '3' }
      ]
    };
  }
};
</script>

这个代码实例展示了如何在Vue中使用Element UI组件库动态渲染单选按钮（Radio）和多选框（Checkbox）。radioOptions和checkboxOptions是动态数据源，可以根据实际需求进行修改和更新。radioValue和checkboxValues是绑定到对应组件的模型，用于存储用户的选择。