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