Klassen mit String-Literalen in Vue, HTML

Question

Ich wünschte, wenn ich die Taste drücke, um mich mit einem falschen Passwort anzumelden, würde die Benutzeroberfläche mehrere Alarm-Popups statt nur einem anzeigen, weil der Benutzer nicht weiß, ob er trotzdem das falsche Passwort eingegeben hat.

Also verwende ich Zähler- und String-Literale wie folgt

<!-- mt = margin-top, so each alert won't lie on each other -->
<v-alert
  v-for="i in counter"
  :key="i"
  class=`mt-${i}`
>
  Wrong Password
</v-alert>

Das funktioniert nicht. Irgendwelche anderen Ideen?

Answer 1

您可以绑定类 -> :class="'mt-${i}'" tildas ` 应该仅位于 ${i} 周围，并在整个名称 'mt-yourcode' 周围使用撇号< /p>

Answer 2

这应该有效：

<v-alert v-for="i in counter" :key="i" :class="`mt-${i}`">
  Wrong Password
</v-alert>

查看此示例