mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-06 05:59:46 +08:00
1.2 KiB
1.2 KiB
#### 受控的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>