如何在href标签中传递变量？

Question

我有一个基于Vue的应用程序，其中在标题中显示不同的链接。 根据环境的不同，链接的根路径也会发生变化，因此我保存了一个环境变量，其值为链接的根路径。 我在组件中导入它以使用对该变量的引用，但我找不到将其包含在href标记中的方法。 在我的组件脚本中，我导入配置文件，其中声明了该变量，并返回。

<script>
import Config from './../../config.js';

export default {
  data: function () {
    return {      
      hoverHome: false,
      testUrl: Config.TEST_URL
    }
  },

此时环境变量带来的价值是 https://www.test.sp，在我的模板中我尝试使用它，但无论是仅有此值还是与url结尾组合使用，我都不知道该如何操作。

  <li class="nav-item">
      <a class="nav-link head" href=testUrl>Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" href=testUrl/shops>Shops</a>
  </li>

我该如何在 href 标签内使用这个变量？

- homerThinking

Answer 1

您需要使用 v-bind:href 或简写的 :href 来绑定 href 属性值，使用 v-bind。

因此，您可以简单地绑定任何具有某些链接的变量到 href，如：

<a v-bind:href="'/anylink/' + testUrl">

- Fawad

Answer 2

你需要使用v-bind:或其别名：。例如，

<li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
  </li>

或者

<li class="nav-item">
      <a class="nav-link head" :href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
  </li>

请参考如何将Vue数据传递到href中?。

- Amede Angel Aulerien