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

Question

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

1234
122356
124
12312

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

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

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