主页 / 问题 / 981592
Accepted
A K
Asked:2020-05-15 15:56:23 +0800 CST2020-05-15 15:56:23 +0800 CST

在 Vue.js 中按条件添加 css 类

  • 772

在将代码从 asp.net 核心项目移植到 vue 后端时，我发现我想更简洁地编写模板的一些片段。

这是原始片段：

<li class="page-item disabled" v-if="isFirst">
    <a class="page-link" :href="firstUrl">&#171;&#171;</a>
</li>
<li class="page-item" v-if="!isFirst">
    <a class="page-link" :href="firstUrl">&#171;&#171;</a>
</li>

但是，在 php 中，我可以写得更短，像这样（非工作代码，只是一个概念）：

<li class="page-item {{ isFirst ? 'disabled' : '' }}">
    <a class="page-link" :href="firstUrl">&#171;&#171;</a>
</li>

有没有办法在 vue.js 中做到这一点？

javascript

2 个回答

  1. Best Answer

    有这样的事情，但不是在额头上做的。我在这个问题上发现了一个例子：Vue.js：条件类样式

    在我的示例中，它将如下所示：

      <li :class="{ 'disabled': isFirst(), 'page-item': true }">
    <a class="page-link" :href="firstUrl">&#171;</a>
  </li>

    事实证明，文档就是关于它的，您只需要记住它可以应用于当前问题。

    @Dmytryk 建议的替代版本：

      <li :class="[{ 'disabled': isFirst()}, 'page-item']">
    <a class="page-link" :href="firstUrl">&#171;</a>
  </li>
    • 5

  2. 如果条件需要一个类的输出v-if，并且类和条件的数量增加，这一切都是通过循环输出的v-for，那么你需要把这个事情放到字段中computed，不要在视觉上使模板超载。如果有一个类必须永久附加到元素，则使用 normalhtml属性class="some-class"。

    <div v-for="(item, index) in items">
  <div class="const-class" :class="bestCompanyClass(item.id)">
    <!--  -->
  </div>
</div>

    data: {
  bestCompany: 3,
  items: []
},

computed: {
  bestCompanyClass() {
      return (id) => {
        return {
          'best-company': this.bestCompany === id,
          'другой-класс': условие вывода класса,
          'третий-класс': условие вывода класса,
        }
      }
  }
}

    如果没有数据传递给计算类，则：

    computed: {
  validatedClass() {
    return {
      'is-valid': this.wasValidated,
      'другой-класс': условие вывода класса,
      'третий-класс': условие вывода класса,
    }
  }
}
    • 3

相关问题