vue v-bind:class

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43195512/article/details/102777210

<template>
    <div>
        <h3>styleDemo</h3>
        <div v-bind:class="{ active: isActive }"></div>
    </div>
    
</template>
<script>
export default {
    data () {
        return {
        isActive:true
        }
    }
}
</script> 
<style scoped>
.active {
    display: block;
    height: 100px;
    width: 100px;
    background: red;
}
</style>

这样就可以通过切换isActive的true和false切换盒子的显示隐藏