ant-design-vue/antdv-demo/docs/checkbox/demo/controller.md

#### 受控的checkbox 联动checkbox #### Controlled Checkbox Communicated with other components

<template>
  <div>
    <p :style="{ marginBottom: '20px' }">
      <a-checkbox :checked="checked" :disabled="disabled" @change="onChange">
        {{ label }}
      </a-checkbox>
    </p>
    <p>
      <a-button type="primary" size="small" @click="toggleChecked">
        {{ !checked ? 'Check' : 'Uncheck' }}
      </a-button>
      <a-button :style="{ marginLeft: '10px' }" type="primary" size="small" @click="toggleDisable">
        {{ !disabled ? 'Disable' : 'Enable' }}
      </a-button>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      disabled: false,
    };
  },
  computed: {
    label() {
      const { checked, disabled } = this;
      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
    },
  },
  methods: {
    toggleChecked() {
      this.checked = !this.checked;
    },
    toggleDisable() {
      this.disabled = !this.disabled;
    },
    onChange(e) {
      this.checked = e.target.checked;
    },
  },
};
</script>