vue在for循环中绑定html数据属性

Posted 2023-02-23

【中文标题】vue在for循环中绑定html数据属性

【英文标题】：vue bind html data attribute within for loop

【发布时间】：2021-05-19 04:11:05

【问题描述】：

我在 vue 中循环显示颜色代码以及工具提示中的颜色名称。工具提示通过 html 5 使用数据属性。

现在我正在尝试通过 vue 绑定它，我能想到并且在所有 vue 文档中使用的唯一语法就是 this

<div :data-tooltip="color.name" v-for="(color, index) in colors" :key="index" @click="setColor(color)" class="color-box" :style=" background: color.hexCode">

但是，这不起作用并导致 DOM 如下所示：

<div data-v-d0a245c6="" class="color-box" style="background: rgb(0, 247, 0);"></div>

我希望它看起来像这样：

<div data-attribute="Sunny yellow" class="color-box" style="background: rgb(0, 247, 0);"></div>

但由于某种原因，我无法动态绑定使用破折号的属性。

我也试过骆驼肠衣：

<div :dataTooltip="color.name" v-for="(color, index) in colors" :key="index" @click="setColor(color)" class="color-box" :style=" background: color.hexCode">

结果相同。 我在这里做错了什么？

【参考方案1】：

你可以使用v-bind:

<div v-bind="getDataAttr(color.name)" v-for="(color, index) in colors" :key="index" @click="setColor(color)" class="color-box" :style=" background: color.hexCode">

...

methods: 
  getDataAttr(color) 
    return 
      'data-tooltip': color
    
  

【讨论】：

那么，这个基本会把v-bind="getDataAttr(color.name)"替换成data-tooltip="red"？哇 ！ :D

是的，您可以从getDataAttr 方法返回任意数量的data- 属性。