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

Question

我有一个 vue 应用程序，我在 header 中显示了不同的 link。 link 的根因环境而异，因此我保存了一个环境变量，其中包含 link 的根的值。我在组件中导入它以使用对这个变量的引用，但我找不到将它包含在 href 标签中的方法。在我的组件脚本中，我导入了声明变量的配置文件和 return

<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 标签中使用这个变量？

Answer 1

您需要使用 v-bind:href 或 :href 绑定 href 值 v-bind

所以你可以简单地将任何具有一些 link 的变量绑定到你的 href，比如

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

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>

见

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

How to pass a variable in a href tag?

html

href

environment-variables

vue.js