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

Question

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

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

如果我将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)"
    />

Answer 2

首先，澄清一下我要回答的问题。给定以下代码：

<div v-if="index % 2" class="lg:flex flex-row-reverse">
  ... children ...
</div>
<div v-else class="lg:flex">
  ... identical children ...
</div>

有没有办法避免 v-if 并有条件地添加 flex-row-reverse 类？

这里有很多选择。首先，属性class 和style 具有特殊行为，允许您指定同一属性的绑定副本和静态副本。对于其他属性，您不能这样做。例如

<div
  class="lg:flex"
  :class="{ 'flex-row-reverse': index % 2 }"
>

所以lg:flex 类作为静态类添加，而flex-row-reverse 是有条件添加的。 Vue 会根据需要将它们组合起来，创建完成的 DOM 节点的class 属性。

还有很多其他的写法。这里有几个值得思考的：

<div :class="{ 'lg:flex': true, 'flex-row-reverse': index % 2 }">

<div :class="['lg:flex', { 'flex-row-reverse': index % 2 }]">

数组可以嵌套任意深度。纯字符串将被视为要添加的类。对象将被视为条件类的集合，类名作为属性名，条件作为属性值。

所有这些都使用了 Vue 对有条件地添加类的支持。但是，绑定表达式只是任意 JavaScript，因此您可以使用普通 JavaScript 语法应用条件，而不是让 Vue 为您完成。

这通常比较笨重。这必须是单个表达式，因此您不能使用if/else。但是，您可以改用?:：

<div :class="'lg:flex' + (index % 2 ? ' flex-row-reverse' : '')">

这些构建类的各种方法的官方文档在这里：

https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes