Как задавать имя класса в зависимости от индекса в v-for?

Question

[alexeeey_kuznetsov]

Мне необходимо в цикле добавить для каждого последующего (с увеличением цикла) заголовка задержку анимации. Саму задержку я планировал добавить через index цикла. Но в динамическом добавлении классов не работает `${index}` такое обособление.
https://codepen.io/alexeeey_kuznetsov/pen/xxKVKvG
В примере на codepen я просто к примеру привёл что данный класс добавляется при advantage.notThreeLines. Мне же необходимо просто добавить такой класс каждому h3, но с разным значением (классы delay-1s, delay-2s, delay-3s).

Comments

[Вячеслав]

key

[alexeeey_kuznetsov]

Вячеслав, Можно поподробнее?

[Вячеслав]

alexeeey_kuznetsov, можно. в каждом языке программирования в массивах\циклах есть ключи. key или index в вашем случае. вам нужно просто указать этот ключ к вашему классу.

[alexeeey_kuznetsov]

Вячеслав, в описании указал, что в случае добавления его так :class индекс или ключ не распознаётся как js, а распознаётся как строка.

Answer 1

[0xD34F]

:class="{ [`delay-${index}s`]: advantage.notThreeLines }"

Comments

[alexeeey_kuznetsov]

А этот класс можно по умолчанию добавить всем элементам в цикле?

[0xD34F]

alexeeey_kuznetsov, какой "этот"? Имя класса зависит от индекса. Вы хоть немного думайте, прежде чем спрашивать.

[alexeeey_kuznetsov]

delay-${index}s
Вот эти классы чтобы по умолчанию добавлялись всем заголовкам в цикле.
Это я имел ввиду.

[0xD34F]

alexeeey_kuznetsov,

:class="`delay-${index}s`"

А вообще, вам будет нелишним документацию почитать - вы явно этого не делали.

[alexeeey_kuznetsov]

0xD34F, Вот, не поверите, но именно эту ссылку я читал. Где там конкретно сказано, что надо оборачивать в квадратные скобки я не нашёл.
В Vue новичок прямо вот самый настоящий.
Спасибо за ответ!

[0xD34F]

alexeeey_kuznetsov,

Где там конкретно сказано, что надо оборачивать в квадратные скобки я не нашёл.

Документация рассчитана на тех, кто знает язык. Знали бы - догадались бы до скобок сами. Вообще, это большая ошибка - пытаться осваивать фреймворки без знания языка.

[DivoTech]

0xD34F, а если надо просто переменную вывести, это выражение
`${index}`
можно как-то попроще написать?