如何在 vue.js 中为元素动态添加属性？

Question

给定一个 items 对象数组：

items: [{
 label: 'My Link',
 attrs: {
  href: '/route',
  target: '_blank',
  title: 'Some title',
 },
},{
 label: 'My Link 2',
 attrs: {
  href: '/route2',
  target: '_self',
  title: 'Some title 2',
 },
}];

我的 vue 有一个 v-for 循环遍历项目列表：

<ul>
  <li v-for="item in items">
    <a ADD_ITEM_ATTRIBUTES_HERE>{{ item.label }}</a>
  </li>
</ul>

如何遍历每个项目的属性并将其动态添加到锚元素，其中属性名称是对象键，属性值是其匹配值？

我来自 jQuery 世界，在那里这种操作非常简单，但我不确定在这种情况下如何修改 DOM。

我在这里发现的大多数问题都与检查元素是否具有属性或满足设置其值的条件有关。我不想那样做。就我而言，我不知道道具是什么，也不知道它的价值。

Answer 1

由于您已经在对象中具有属性，因此可以直接将其传递给v-bind; 另请参阅绑定属性对象示例：

<a v-bind="item.attrs">{{ item.label }}</a>

这将导致attrs对象中的键作为属性和值attrs作为相应的值。