vue.js如何用v-if写class

Question

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

Answer 1

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
    }
}

Answer 2

v-bind:class={"样式":判断条件}

Answer 3

js 里面 用 teger ...切换的函数 前台model 绑定变量 就能达到