Vue JS 并将变量附加到 URL 的末尾答案

【问题标题】：Vue JS and appending a variable to end of a URLVue JS 并将变量附加到 URL 的末尾
【发布时间】：2016-12-21 16:10:33
【问题描述】：

我的页面上有一个 v-for 方法，我正在输出一系列数字。

我的 v-for 输出这些数字中的每一个，我需要将它们附加到如下链接：

<a href="/order/1234">1234</a>
<a href="/order/122356">122356</a>
<a href="/order/124">124</a>
<a href="/order/12312">12312</a>

我现在得到

<a href="/order/{{ order.number }}">1234</a>
<a href="/order/{{ order.number }}">122356</a>
<a href="/order/{{ order.number }}">124</a>
<a href="/order/{{ order.number }}">12312</a>

谁能告诉我我做错了什么？

【问题讨论】：

你能说出你的模板里有什么吗？

标签： javascript vue.js

【解决方案1】：

对于这种情况，您应该使用v-bind directive，如下所示：

<a v-bind:href="'/order/' + order.number">1234</a>
<a v-bind:href="'/order/' + order.number">122356</a>
<a v-bind:href="'/order/' + order.number">124</a>
<a v-bind:href="'/order/' + order.number">12312</a>

或者简而言之，您也可以编写以下内容：

<a :href="'/order/' + order.number">1234</a>
<a :href="'/order/' + order.number">122356</a>
<a :href="'/order/' + order.number">124</a>
<a :href="'/order/' + order.number">12312</a>

【讨论】：