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指令,如下所示:

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