这篇文章主要介绍“checkbox组件怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“checkbox组件怎么用”文章能帮助大家解决问题。
<template>
<div class="chat-checkbox">
<input
:id="id"
:name="name"
v-model="value"
@change="check"
class="checklist"
type="checkbox"
/>
<label :for="forId"></label>
</div>
</template>
<script>
export default {
name: 'chatCheckBox',
props: {
id: {
type: String,
},
forId: {
type: String,
},
name: {
type: String
},
vModelValue: {
type: Boolean
}
},
data() {
return {
value: this.vModelValue
}
},
methods: {
check(e) {
this.$emit('change', e)
}
}
}
</script>
<style lang="scss" scoped>
@import '@css/globalCite/defaultVariable.scss';
@import '@css/globalCite/defaultThemeVariable.scss';
@import '@css/globalCite/themeMixin.scss';
@import '@css/globalCite/bgImageMixin.scss';
@import '@css/vux/chatCheckbox.scss';
</style>
关于“checkbox组件怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。