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元素，它是一个块元素。您可以使用span或Vue特定的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>

Answer 2

只需将v-for移至router-link组件：

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

默认情况下，router-link组件将呈现一个<a>标签，然后您可以通过CSS对其进行样式设置以获得所需的布局。

示例：

new Vue({
  el: '#root',
  router: new VueRouter()
});

a + a { margin-left: 0.3rem; }

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="root">
  <router-link v-for="id in 10" :key="id" :to="'/foo/' + id">{{id}}</router-link>
</div>

Answer 3

您可以将组件div更改为span，或将div的样式更改为：

display: inline-block;

Answer 4

将一个类添加到template / div并使用以下样式设置

：

display: flex;

和v-代表路由器链接，而不是div。它应该使您的分页变得内联！

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

4 个答案: