Question

给出对象的项目数组：

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

由于对象中已经具有属性，因此可以将其直接传递给<a v-bind="item.attrs">{{ item.label }}</a>；另请参见bind an object of attributes example：

attrs

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

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

1 个答案: