computed 计算属性改变背景色

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/82957714

html:

<template>
    <div>
        <button @click="changeColor =! changeColor">change Color</button>
        <div :class="compClasses">
            <span>改变背景色</span>
        </div>
    </div>
</template>

javascript:

<script>
export default {
    data(){
        return{
            changeColor:false,
        }
    },
    computed:{
        compClasses(){
            return {
                changeColor:this.changeColor
            }
        }
    }
}
</script>

css:

<style>
span{
    color: red;
}
 .changeColor span{
     background-color: yellowgreen;
 }
</style>

效果: