vue.js如何用v-if写class

问题描述

问 题

如题,比如v-if后,div被点击后class背景色是蓝的,没点击class就是红的.或者不用v-if?用别的方法?
还有个情况就是第一个div点击时,另一个div的class变化,如何写呢?

解决方案

v-if是用来切换节点是否被渲染的，不是负责判断所有if逻辑的。

第一种情况，用动态class就行。

<div 
:class="clicked? 'blue-class':'red-class'"
@click="clicked = !clicked" ></div>

...

data () {
    return {
        clicked: false
    }
}

也可以动态class类名等于一个计算属性，然后计算属性根据clicked返回不同的class名，效果是一样的，看习惯哪种写法了。

第二个问题也是一样的，把改变class的逻辑或者方法绑定给另一个div就可以了，比如：

<div :class="clicked? 'blue-class':'red-class'" ></div>
<div @click="clicked = !clicked" ></div>
...

data () {
    return {
        clicked: false
    }
}

这篇关于vue.js如何用v-if写class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！