时间戳

首页 > 解决方案 > 难以实现 vue 分页

html - 难以实现 vue 分页

问题描述

我想为我的网站实现分页，我发现了一个非常漂亮的示例，可以与 Vue 一起使用。

我以前没有使用 Vue 的经验，也无法进行演示。

我在这里找到了我想使用的分页

这是我正在尝试制作的演示

我尝试按照第一个链接中给出的说明进行操作，并在 .html 文件中获得了以下代码：

<!doctype html>
<html lang="en">

<head>
    <title>vue-plain-pagination</title>
</head>

<body>

    <div id="app">
        <p>page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="total"></v-pagination>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/vue-plain-pagination"></script>
    <script>
        Vue.component('v-pagination', window['vue-plain-pagination'])

        new Vue({
            el: '#app',
            data: {
                currentPage: 5,
                total: 9,
            },
        })

    </script>

</body>

</html>

这段代码生成的网页只有文本“page：5”，没有别的，分页栏不显示。你知道如何让代码像演示中那样工作吗？我尝试更改几行代码并在线寻找教程但没有任何成功。

标签： htmlvue.jspagination

解决方案

您的代码不起作用，因为基本示例没有样式。在您链接的示例中，它使用了来自 Boostrap 的样式表。

您需要包含样式表才能为项目设置样式。

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">

这是一个有效的代码笔： https ://codepen.io/CodingDeer/pen/VwZrXLe

推荐阅读