是否可以在vuejs中连接类属性？

Question

一般问题：我想知道是否可以根据条件连接类属性。请参见v-for行中的伪代码。

我的用例：我想对齐所有索引在右侧的偶数图像。

如果父部分使用flex flex-row-reverse，则会使图像在右侧对齐。但是我不知道如何构造类，而不必为子元素重复代码。

<section
    v-for="(quote, index) of $frontmatter.quotes :class="lg:flex my-4 mx-12 overflow-auto" + {even: index % 2, odd: !(index % 2)}"
  >
    <img
      class="quote-image right rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
      :src="$withBase(quote.image)"
    />

    <div class="px-8 pt-6">
        <h3 class="text-primary font-bold mb-4">
          {{ quote.title }}
        </h3>
      <p>
        {{ quote.text }}
      </p>
    </div>
  </section>

然后将类扩展名称为：

.even {
   flex-row-reverse
}

当前，我使用此结构-但是，对此我不满意，因为我必须为子元素重复我的代码...

<section
        v-for="(quote, index) of $frontmatter.quotes"
        class= "my-16 mx-24 overflow-auto"
      >
      <div v-if="index % 2"
      class="lg:flex flex-row-reverse">
        <img
          class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
          :src="$withBase(quote.image)"
        />
        <div class="px-8 pt-6">
          <blockquote>
            <h2 class="text-primary font-bold mb-4">
              {{ quote.title }}
            </h2>
          </blockquote>
          <p class="quote-text">
            {{ quote.text }}
          </p>
        </div>
      </div>
      <div v-else
        class="lg:flex">
        <img
          class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
          :src="$withBase(quote.image)"
        />
        <div class="px-8 pt-6">
          <blockquote>
            <h2 class="text-primary font-bold mb-4">
              {{ quote.title }}
            </h2>
          </blockquote>
          <p class="quote-text">
            {{ quote.text }}
          </p>
        </div>
      </div>

      </section>

看起来应该像这样：

Answer 1

因为您使用的是类，而不是<b-img>道具，所以您需要的类可能是float-right而不是right

    <img v-if="index % 2"
      class="quote-image float-right rounded-full h-64 w-64 shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
      :src="$withBase(quote.image)"
    />