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

Question

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

7

给定一个由对象组成的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。

我在这里找到的大多数问题与检查元素是否具有属性或满足条件以设置其值有关。我不是要这样做。在我的情况下，我不知道prop将是什么，也不知道它的值。

- gdaniel

可能是重复问题：如何在Vue JS中绑定属性？ - Graham

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Psidom · Accepted Answer

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

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

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