Javascript 当我的密钥包含JSON数据中的破折号（-）时，如何在vue.js中绑定数据？

我的JSON数据如下所示：

{
    "color-1": "#8888",
    "color-2": "#000"
}

如何将此变量与vue组件的样式标记绑定？ 我试图用下面的方式使用它，但它不起作用

<div v-bind:style="{ color: data['color-1'] }"></div>

---

可以将连字符分隔的属性作为字符串

<div v-bind:style='{ "color-1": data["color-1"] }'></div>

---

可以将连字符分隔的属性作为字符串

<div v-bind:style='{ "color-1": data["color-1"] }'></div>

---

通常，您可以通过直接引用模板中组件的数据属性来访问它们，而无需为此添加前缀。或数据。。在您的情况下，这是一个问题，因为它阻止您使用

您有两种解决方案：

解决方案1：不要将JSON数据直接放在组件数据中，而是将其包装在一个对象中，例如颜色。这样，在模板中使用颜色['color-1']就可以了

解决方案2：保持数据不变，编写一个简单的方法来获取组件中的属性，然后从模板中调用它。比如：

methods: {
  getProperty: function (name) {
    return this[name];
  }
}

然后在模板中：

<div v-bind:style="{ color: getProperty('color-1') }"></div>

---

通常，您可以通过直接引用模板中组件的数据属性来访问它们，而无需为此添加前缀。或数据。。在您的情况下，这是一个问题，因为它阻止您使用

您有两种解决方案：

解决方案1：不要将JSON数据直接放在组件数据中，而是将其包装在一个对象中，例如颜色。这样，在模板中使用颜色['color-1']就可以了

解决方案2：保持数据不变，编写一个简单的方法来获取组件中的属性，然后从模板中调用它。比如：

methods: {
  getProperty: function (name) {
    return this[name];
  }
}

然后在模板中：

<div v-bind:style="{ color: getProperty('color-1') }"></div>

---

您可以通过$data访问所有数据属性：

{ "color-1": $data["color-1"] }

---

您可以通过$data访问所有数据属性：

{ "color-1": $data["color-1"] }

---

他也有类似的问题。以下是修复方法：

<div v-bind:style="{ color: this['color-1'] }"></div>

---

他也有类似的问题。以下是修复方法：

<div v-bind:style="{ color: this['color-1'] }"></div>

---

在找到类似问题的更多细节后，以下是我的发现 由于v-bind需要一个javascript表达式，所以不能使用-in标识符。如果您真的想使用-，可以使用v-bind:src=this['image-src']，因为这在模板中是可以访问的。

---

希望有帮助

在找到类似问题的更多细节后，以下是我的发现 由于v-bind需要一个javascript表达式，所以不能使用-in标识符。如果您真的想使用-，可以使用v-bind:src=this['image-src']，因为这在模板中是可以访问的。

---

希望有帮助

这实际上比预期的答案更清楚这实际上比预期的答案更清楚