Блог

У меня проблема с css.

Я хотел бы выбрать <tr> класс элемента. Я использую bootstrap, и я хотел бы использовать классы bootstrap, такие как .success или .danger .

Я использую vue.js и у меня есть объект с идентификатором, именем, статусом и т.д., Имя статуса не совпадает с .success или .danger, Но мне нужно использовать эти два класса, зависит от имени статуса.

Я знаю два решения:

1. Напишите функцию JS, чтобы возвращать имя класса, зависящее от имени статуса. <tr class={{myFun(object.status)}} . Моя функция — это простая инструкция case.
2. Расширьте имя класса bootstrap в sass. .STATUS { @extend .success; }

Я новичок в интерфейсе, до этого я создавал очень простые статические HTML-страницы, и мне любопытно, какое решение мне следует использовать? Может быть, другой? Я пытался найти что-нибудь в Интернете, но не нашел ничего интересного.
Может ли кто-нибудь дать мне какой-нибудь совет?

Вы можете использовать встроенную директиву класса Vue, например:

 <tr
  :class="{
    'success': object.status === 'somestatus',
    'error': object.status === 'otherstatus'
  }">
  ...
</tr>
  

Для этого нет необходимости писать новый метод. Взгляните на Руководство по привязкам классов и стилей для получения дополнительных примеров.