Vue Js - 在单行中使用 v-for 循环显示元素（用于分页）

Question

我正在使用v-for循环来显示分页链接 -

<div v-for="n in this.totalPages">
   <router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>

每个链接都显示在新行中，如下所示 -

1

2

有什么办法可以将它们显示在单行中吗？像这样 -

1 2

谢谢。

Answer 1

每个链接显示在新行中的原因是因为您正在迭代一个div块元素的元素。您可以使用内联元素，例如spanVue 特定的元素template，它不会呈现任何额外的标记，或者您可以只迭代router链接

<router-link
  :to="'/top/pages/' + n"
  @click.native="getPaginatedUser"
  :key="n"
  v-for="n in this.totalPages"
>{{ n }}</router-link>

使用template而不是div.

<template v-for="n in this.totalPages">
    <router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser" :key="n">{{ n }}</router-link>
</template>