Mustaches不能在HTML属性中使用。请使用v-bind指令：

<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' },
]

你能更具体地说明你在寻找什么样的动态填充“href”属性吗？
只需遵循#TheGuardian的答案，考虑使用以下示例中的模板重新设计您的模块：

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

型号：

<script>
export default {
    name: 'NavigationDrawer',
    props: {
        msg: String,
        hyperlinks: [
            {
                display: String,
                href: String
            },
            {
                display: String,
                href: String
            }
        ]
    }

这样，'href'属性就和显示文本绑定在一起，这样，许多超链接节点就可以动态地添加到HTML DOM树中。
您也可以在HTML节点中连接'href'属性值，如下例所示：

<div class="navigationdrawer">
<div id="mySidenav" class="sidenav">
  <a :href="'https://myDomainName/'+link.href" v-for="link in hyperlinks" :key="link.href">
    {{ link.display }}
  </a>
</div>

这样，可以半动态地填充'href'属性值。
希望这个有用。