vue通过响应式变量控制元素class名

例如 此时我们data中有一个isApp变量 值为 true/false 我们希望 当isApp为true时 给div添加 类名 app

data(){
    
    
    return{
    
    
        isApp: true
    }
}

比较简单的写法就是

<div :class = "isApp == true?'app':''"></div>

这样写看着比较捞 而且当你元素有很多类名时 就很不好用了

我们可以这样写

<div v-bind:class="{app:isApp == true}"></div>

看着就比较美观 而且最大的好处还是不影响其他类名

因为在同一块元素上 v-bind:class 和 class并不冲突 完全可以一起用