Javascript Vue.js动态href

因此，我正在尝试在Vue组件中创建一个动态href，该组件可以在App.Vue文件中编辑（无需在组件文件中编辑）

就像文件中的名称1、名称2、名称3和名称4一样

<div class="navigationdrawer">
    <div id="mySidenav" class="sidenav">
        <a href="#">{{ name1 }}</a>
        <a href="#">{{ name2 }}</a>
        <a href="#">{{ name3 }}</a>
        <a href="#">{{ name4 }}</a>
    </div>
</div>

导出默认值{
名称：“导航抽屉”，
道具：{
msg:String，
名称1：字符串，
名称2：字符串，
名称3：字符串，
名称4：字符串，
链接1：字符串，
链接2：字符串，
链接3：字符串，
链接4：字符串
}

当我把

---

它适用于{name1}，但{link1}}部分给出了一个错误。

Mustaches不能在HTML属性中使用。请改用指令：

<a v-bind:href="link1">{{ name1 }}</a>

<a v-bind:href="link1">{{ name1 }}</a>

<a :href="link1">{{ name1 }}</a>

<div class="navigationdrawer">
  <div id="mySidenav" class="sidenav">
    <a :href="link.href" v-for="link in links" :key="link.href">
      {{ link.name }}
    </a>
  </div>
</div>

[
 { name: 'Name 1', href: 'http://name1.com' },
 { name: 'Name 2', href: 'http://name2.com' },
]