Class 在 Vue 中使用字符串文字，HTML

Question

我希望当我使用错误密码登录按钮时，UI 显示多个警告弹出窗口而不是一个，因为用户将不知道他们是否仍然输入错误密码。

所以我像这样使用计数器和字符串文字

<!-- 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>

没用。还有其他想法吗？

Answer 1

你可以绑定 class -> :class="'mt-${i}'" tildas ` 应该只在 ${i} 周围，整个名称周围有一个撇号 'mt-yourcode'

Answer 2

这应该有效：

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

See this example

Class 在 Vue 中使用字符串文字，HTML

Class with string literals in Vue, HTML

html

css

vue.js

vuetify.js