CheckBox 复选框

基础用法

<template>
    <pd-checkbox 
        v-model="checked1" 
        label="可选项1"
    >
    </pd-checkbox>
    <pd-checkbox 
        v-model="checked1" 
        label="可选项2"
    >
    </pd-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked1: true,
        checked2: false,
      };
    },
  };
</script>

显示代码 复制代码 复制代码

多选框组

在pd-checkbox-group中绑定v-model，在pd-checkbox中设置好label即可，无需再给每一个pd-checkbox绑定变量

<pd-checkbox-group v-model="checked">
  <pd-checkbox label="选项1"></pd-checkbox>
  <pd-checkbox label="选项2"></pd-checkbox>
  <pd-checkbox label="选项3"></pd-checkbox>
</pd-checkbox-group>
<script>
  export default {
    data() {
      return {
        checked: ["选项1"],
      };
    },
  };
</script>

显示代码 复制代码 复制代码