如何为 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；另见bind an object of attributes example:

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

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