在 vuejs 中，在 HTML 元素属性中引用变量不起作用答案

【问题标题】：In vuejs, quoting variables in HTML element attribute doesn't work在 vuejs 中，在 HTML 元素属性中引用变量不起作用
【发布时间】：2023-01-20 09:35:20
【问题描述】：

这是代码：

<tr v-for="(item, index) in detail" :key="item.name" class="[[ item.name ]]">
  <td>[[ index + 1 ]]</td>
  <td>[[ item.name ]]</td>

呈现的 HTML 如下所示：

<tr class="[[ item.name ]]">
  <td>1</td>
  <td>Job</td>
</tr>
<tr class="[[ item.name ]]">
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr class="[[ item.name ]]">
  <td>3</td>
  <td>Wazert</td>
</tr>

class="[[ item.name ]]" 只是不要改变。我期望的是：

<tr class="Job">
  <td>1</td>
  <td>Job</td>
</tr>
<tr class="Jesse">
  <td>2</td>
  <td>Jesse</td>
</tr>
<tr class="Wazert">
  <td>3</td>
  <td>Wazert</td>
</tr>

我该如何解决？

【问题讨论】：

您在哪里读到有关使用方括号的信息？ The documentation 很清楚，还介绍了如何将数据绑定到属性。

标签： vue.js

【解决方案1】：

第一件事方括号在 vue.js 中不起作用，您需要使用 interpolation 动态绑定数据。

所以你需要使用像例如

HTML

<table border="1">
   <tr v-for="(item, index) in detail" :key="item.name" :class="item.name">
      <td>{{ index + 1 }}</td>
      <td>{{ item.name }}</td>
   </tr>
</table>

data: function () {
  return {
    detail: [{ name: "Job" }, { name: "Jesse" }, { name: "Wazert" }],
  };
},

Here你可以玩代码

【讨论】：

非常感谢 codesandbox 链接。那么，如果我想将:class 更改为:data-custom，那也行吗？抱歉，我找不到在 codesandbox 上重新运行修改后的代码的地方。
不使用仅:class 因为这是在 codesandbox 中修改后用于绑定动态类的内置类按 CTRL + S 并检查是否不起作用然后创建一个并将我的代码粘贴到那里并检查
感谢反馈，那么data-custom呢？如果我不想使用class，我该怎么做？

【解决方案2】：

您需要使用class-binding和interpolate数据：

new Vue({
  el: "#app",
  data: () => ({ 
    detail: [ { name: "Job" }, { name: "Jesse" }, { name: "Wazert" } ] 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tr v-for="(item, index) in detail" :key="item.name" :class="item.name">
      <td>{{index + 1}}</td>
      <td>{{item.name}}</td>
    </tr>
  </table>
</div>

【讨论】：

【解决方案3】：

这可能是由于“错误日期的脚本”而发生的。你必须了解最新版本的 Vue.js 并根据你的项目使用正确的脚本。

截至本回复时：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

是 Vue 3 的正确脚本。

但是，您可以查看 https://unpkg.com/ 页面以查看最新的脚本，或者测试最适合您机器上的节点版本的脚本。

和平！

【讨论】：