Vue.js 中的条件类样式绑定答案

【问题标题】：Conditional class style binding in Vue.jsVue.js 中的条件类样式绑定
【发布时间】：2021-07-20 18:55:21
【问题描述】：

我想让样式仅在特定条件下添加到图像中。

代码如下：

<div>
  <div v-for="(item, index) in productsList" :key="item.id" class="cart-img">
    <img
        v-if="item.file"
        :src="
           `https://server.com/${
            index === productsListBigIndex ? item.fileWide : item.file
              }`
            "
        :alt="item.altText || item.text"
        draggable="false"
    />
    <img
        v-else
        :alt="item.altText || item.text"
        :src="'https://server.com/empty.png'"
    />
    <p style="font-size: medium">{{item.text}}</p>
  </div>
</div>

样式应取决于index 和productsListBigIndex。比如index是0或者2，那么这个样式（特别是图片的大小）会加进去，否则就不加。

感谢您的回答！

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样您可以有条件地添加或删除指定的类名和样式，

【讨论】：

【解决方案2】：

v-bind:class="getClass()"

methods:{
 getClass(){

   //logic to check the condition and return the class name
 }
}

【讨论】：