<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切换盒子的显示隐藏