使用 element-plus 的Checkbox 组件写一个demo

以下是一个使用 element-plus 的 Checkbox 组件的示例：

<template>
  <div>
    <h3>选择你最喜欢的水果：</h3>
    <el-checkbox v-model="fruits" label="apple">苹果</el-checkbox>
    <el-checkbox v-model="fruits" label="banana">香蕉</el-checkbox>
    <el-checkbox v-model="fruits" label="orange">橙子</el-checkbox>
    <el-checkbox v-model="fruits" label="watermelon">西瓜</el-checkbox>
    <p>你选择了：{{ fruits }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElCheckbox } from 'element-plus'

export default defineComponent({
  components: { ElCheckbox },
  setup() {
    const fruits = ref([])
    return { fruits }
  },
})
</script>

在示例中，我们使用了 v-model 来绑定复选框选中状态的数组，实现了多选的功能。每个复选框都有一个 label 属性，它的值将被添加到 fruits 数组中，表示该复选框被选中。我们还使用了 ref 来创建响应式变量 fruits。最后，在模板中，我们使用插值 {{ fruits }} 来显示当前选中的水果