Vue中动态绑定class时使用v-if进行绑定class

在使用Vue时，遇到一个需求，就是根据数值不同赋予一个div不同得样式，翻看文档，文档并没有提到可以或如何使用if进行判断，于是进行了尝试，发现是可以的。

###下面让我们观看代码

<div v-for="(item,index) in testList" :key="index">
      <div :class="[{'r': (item.size <= 5 )},
            {'g': (item.size > 5 && item.size <= 10 )},
            {'b': (item.size > 5 && item.size > 10 )}
      style="width: 200px;height: 200px;margin: 20px;">
     		 {{item.size}}
      </div>
</div>

			testList:[
                    { size: 5},
                    { size: 10},
                    { size: 15},
                ]

    .r{
        background-color: #f00;
    }
    .g{
        background-color: #0f0;
    }
    .b{
        background-color: #00f;
	 }

效果如图

1. 写了一个循环遍历testList数组
2. 接着使用Class与Style绑定， 类由判定条件给出。

以上为解决方案，下面让我们观看官方文档

如图，文档中说除可以使用对象或者数组

如图，文档中明确指出可以根据isActive的truthiness判断class是否存在，因此我们可以使用js语法