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

#javascript #vuejs

При переносе кода из проекта на asp.net core в бекенд на vue я столкнулся с тем,
что хочу записать некоторые фрагменты шаблона более лаконично.

Вот исходный фрагмент:


    ««


    ««



Однако в php у меня была бы возможность написать это ещё короче, примерно вот в таком
виде (неработающий код, просто концепт):


    ««



Можно ли как-то это сделать в vue.js?
    

Ответы

Ответ 1

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

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

  

    «
  


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

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

  

    «
  


Ответ 2

Если вывод класса нужен по условию v-if, а количество классов и условий разрастается
и всё это выводится через цикл v-for, то нужно это дело выносить в поле computed и
визуально не перегружать шаблон. Если есть класс, который постоянно должен быть закреплен
за элементом, то используется обычный html атрибут class="some-class".


  

    
  



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

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


Если никаких данных в вычисляемый класс не передаётся, то:

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