Vue JS并将变量附加到URL的末尾 [英] Vue JS and appending a variable to end of a URL

问题描述

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

I have a v-for method on my page and I'm outputting a series of numbers.

1234
122356
124
12312

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

My v-for outputs each of these numbers and I need to append them to a link like the following:

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

有人可以告诉我我在做什么错吗?

Can anyone tell me what I'm doing wrong?

推荐答案

，您应该使用 <这种情况下的code> v-bind 指令，如下所示:

you should use the v-bind directive for this case, like following:

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

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

or in short you can write following as well:

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

这篇关于Vue JS并将变量附加到URL的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！