Vue.js for循环中的vue绑定html数据属性

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

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

<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 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}">

同样的结果。

---

我做错了什么？

您可以使用

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

...
方法：{
getDataAttr（颜色）{
返回{
“数据工具提示”：颜色
}
}
}

您可以使用

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

...
方法：{
getDataAttr（颜色）{
返回{
“数据工具提示”：颜色
}
}
}

因此，这一个基本上将取代

v-bind=“getDataAttr（color.name）”

为

data tooltip=“red”

？哇完全染色-您可以从

getDataAttr

方法返回任意数量的

data-

属性。因此，此属性基本上将用

data tooltip=“red”

替换

v-bind=“getDataAttr（color.name）”

？哇完全染色-您可以从

getDataAttr

方法返回任意数量的

data-

属性。