Как во vue вывести значение условия со строкой?

Question

[ArtJH]

<p :class="'ic' + true ? 'on' : 'off' + '.svg'">123</p>

Выведет тег просто с class="on", без доп. текста.

Answer 1

[0xD34F]

Разберитесь с приоритетом операторов.

Давайте-ка скобок добавлю, чтобы яснее стало, что в каком порядке выполняется:

('ic' + true) ? 'on' : ('off' + '.svg')

Ну и конечно писать подобные выражения в шаблоне - совсем не круто. Вынесите его в вычисляемое свойство или метод, например:

computed: {
  className() {
    return условие ? 'icon.svg' : 'icoff.svg';
  },
  ...

<p :class="className">

Comments

[ArtJH]

Позор мне. Спасибо за помощь, помогло :)

Answer 2

[zav19791979]

а можно еще так

<p :class="{true: 'icon.svg', false: 'icoff.svg'}>123</p>

и в зависимости от того будет ли true или false - присвоится тот или иной класс.