Vue.js中HTML元素属性内引用变量不生效该如何解决？

问题原因 #

Vue 的插值分隔符（你这里自定义的[[ ]]、默认的{{ }}）仅支持在元素文本内容区域使用，不能直接放在HTML属性的值中，属性动态绑定必须使用v-bind指令（简写为:）。

修复方案 #

将class属性改为动态绑定格式，直接在v-bind:class的值中写变量即可，不需要加插值分隔符：

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

补充说明 #

所有需要动态传值的HTML属性都遵循该规则：属性名前加:前缀，属性值直接写JS表达式即可，只有标签内部的文本内容才需要用插值分隔符包裹变量。

内容的提问来源于stack exchange，提问作者AGamePlayer