Добавление css классов по условию в Vue.js

127

18 декабря 2020, 19:00

При переносе кода из проекта на asp.net core в бекенд на 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?

Answer 1

Такая штука вообще есть, только делается не так в лоб. Подсмотрел пример вот в этом вопросе на en so: Vue.js: Conditional class styling

В моём примере получается будет вот так:

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

И оказывается и в документации есть про это, просто нужно было вспомнить, что это можно было применить к текущему вопросу.

Альтернативная версия, предложенная @Дмытрык:

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

Answer 2

Если вывод класса нужен по условию v-if, а количество классов и условий разрастается и всё это выводится через цикл v-for, то нужно это дело выносить в поле computed и визуально не перегружать шаблон. Если есть класс, который постоянно должен быть закреплен за элементом, то используется обычный html атрибут 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,
      'другой-класс': условие вывода класса,
      'третий-класс': условие вывода класса,
    }
  }
}