在vue.js中，如何将列表呈现为元素属性，而不是多个元素

Question

除了属性之外，我似乎找不到类似于v-for的功能。

我想要一些类似的东西：

<div><data-attrs v-for="item in myattrlist">data-{{item.name}}="{{item.value}}"></data-attrs></div>

然后将呈现给

<div data-name1="value1" data-name2="value2"></div>

我的搜索功能不足以找到如何做到这一点。

Answer 1

您可以将对象传递给v-bind，属性将从对象中分配

Vue文档示例：

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

在你的情况下，它会是这样的，

<div v-bind="myattrlist.reduce((attrObj, attr) => ({...attrObj, ['data-' + attr.key]: attr.value}), {})"></div>

尽管我建议在data()方法中创建attrObj，而不是在模板中创建