简体   繁体   English

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

[英]Conditional class style binding in Vue.js

I want to make that styles are added to images only under a certain condition.我想让样式仅在特定条件下添加到图像中。

Here is code:这是代码:

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

The style should depend on the index and productsListBigIndex .样式应取决于indexproductsListBigIndex For example, if the index is 0 or 2, then this style (in particular the size of the picture) will be added, otherwise it will not.比如index是0或者2,那么这个样式(特别是图片的大小)会被添加,否则不会。

Thanks for answers!感谢您的回答!

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

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

v-bind:class="getClass()"

methods:{
 getClass(){

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM