在使用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语法

Logo

前往低代码交流专区

更多推荐