javascript - Vue.js 动态 href

Question

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

就像你在文件中看到的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 属性内使用 mustache 。相反，请使用 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' },
]