在Vue.js 2.0中,可以通过使用v-model指令和绑定一个布尔类型的变量来实现复选框的选中状态。当复选框被选中时,该变量的值会被设置为true,否则为false。然后,可以通过使用计算属性或者监听器来监听该变量的变化,并根据变量的值来向父元素添加类。
以下是一个示例代码:
<template>
<div :class="{ 'selected': isChecked }">
<input type="checkbox" v-model="isChecked">
<label>选中复选框</label>
</div>
</template>
<script>
export default {
data() {
return {
isChecked: false
};
}
};
</script>
<style>
.selected {
background-color: yellow;
}
</style>
在上述代码中,我们使用了动态绑定:class指令来根据isChecked变量的值来决定是否添加selected类。当isChecked为true时,父元素会添加selected类,从而改变背景颜色为黄色。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云