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

阿拉伯数字

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

1 阿拉伯数字

谢谢。

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

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

display: inline-block;

Answer 3

只需将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 4

将类添加到模板/div 并设置其样式：

display: flex;

和 v-表示路由器链路而不是div。 它应该将您的分页内联！