vue.js - 如何在 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>

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

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

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

Answer 1

既然你已经有了一个对象的属性，你可以直接把它传给v-bind ;另见 bind an object of attributes example :

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

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