Vue.js 动态 href

Question

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

就像你在文件中看到的name1、name2、name3和name4一样

<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>

<script>
export default {
        name: 'NavigationDrawer',
        props: {
            msg: String,
            name1: String,
            name2: String,
            name3: String,
            name4: String,
            link1: String,
            link2: String,
            link3: String,
            link4: String
        }
</script>

当我把<a href= {{ link1 }}>{{ name1 }}</a> 它与 {{ name1 }} 一起使用时，但 {{ link1 }} 部分给出了错误。

Answer 1

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