1. 我们在进行组件化开发的时候，可能想让当前类有不同的样式，或者是多种样式。
  2. 亦或是我们想要通过props来进行父组件给子组件传值，然后子组件根据传过来的值进行判断，不同的值对应不同的样式（有点像组件库中的size）
  3. 这时候就引出上题了

操作方法

其实很简单，只需要给class加上{ '类名' : '条件' }即可，比如

1
<div class="pop" :class="{ popB : popAct == true}" >

这里就给盒子加入pop 和 popB的类名了，popB是**(popAct == true)**这个条件为true的时候才触发，也就是popAct == false的时候，这个时候就没有popB这个类名了。

即：

  • 当popAct == true的时候，class = “pop popB”
  • 当popAct == false的时候，不满足触发popB的条件，class = “pop”

多个条件的情况下

1
<div :class="[{ big : size == 'da' },{ mid : size == 'zhong'},{small : size=='xiao'}]">

上面的代码的意思：

  • 当size这个变量等于’da’的时候，即size == ‘da’ 为true的时候，class=”big”
  • 当size这个变量等于’zhong’的时候，即size == ‘zhong’ 为true的时候，class=”mid”
  • 当size这个变量等于’xiao’的时候，即size == ‘xiao’ 为true的时候，class=”small”

这样看是不是很容易理解了。