Vue，HTML中带有字符串文字的类答案

【问题标题】：Class with string literals in Vue, HTMLVue，HTML中带有字符串文字的类
【发布时间】：2021-12-06 11:29:59
【问题描述】：

我希望当我使用错误密码按下按钮登录时，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>

它不起作用。还有其他想法吗？

【问题讨论】：

我真的不明白你的用例，但无论如何字符串文字都是 JavaScript 功能。要告诉 Vue 传递给 prop/class/style 的内容应该被解释为 JavaScript，请使用 v-bind - v-bind:class="`mt-${i}`"

标签： html css vue.js vuetify.js

【解决方案1】：

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

【讨论】：

:class 部分是正确的，但您对如何使用字符串文字的解释不正确（应该是:class=`mt-${i}`）
似乎仍然应该将“”包裹在课程周围
不。这只会使它成为一个包含文字反引号的普通字符串，并且没有变量替换。
Aaaa 原来我错了； vue 模板确实需要在字符串文字周围加上引号。奇怪但真实。为错误信息道歉！
谢谢！我知道我没疯！哈哈

【解决方案2】：

这应该可行：

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

See this example

【讨论】：

快接近了，需要v-bind
是的，ofc ;) 谢谢！它在示例中。