vue实现简单分页效果

效果图如下:
vue实现简单分页效果_第1张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wrapper {
            width: 1170px;
            margin: 300px auto;

        }

        .wrapper li,
        .pre,
        .next {

            width: 32px;
            height: 32px;
            border-radius: 2px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #eee;
            margin-right: 4px;
            cursor: pointer;
            background: #F4F4F5;
            user-select: none;
        }
        .pre,
        .next {
            font-size: 16px;
            font-weight: bold;
          
        }
        .wrapper .active {
            background: #409EFF;
            color: #fff;
        }
        .notAllowed{
              /* cursor: no-drop; */
              cursor: not-allowed;
        }
    style>
head>

<body>
    <div id="app">
       
        <div class="wrapper flex">
            <button class="pre" @click="prePage" :disabled="currentPage==1" :class="currentPage==1?'notAllowed':''"><button>
            <ul class="flex">
                <li :class="{'active':size==currentPage}" v-for="(size,index) in changePageStyle" :key="index" @click="changeSize(size)">{{size}}li>
            ul>
            <button class="next" @click="nextPage" :disabled="currentPage>=totalPage" :class="currentPage>=totalPage?'notAllowed':''">>button>
          
        div>
    div>

    <script>
        const a = `
        

全局组件

`
Vue.component('all', { template: a }) var app = new Vue({ el: '#app', data() { return { totalPage: 15, //总条数 currentPage:1, //当前页面 } }, components: { 'subCmp': { template: `

局部组件

`
} }, created() { }, methods: { changeSize(size){ console.log(size); this.currentPage = size }, prePage(){ this.currentPage-- }, nextPage(){ this.currentPage++ } }, computed:{ changePageStyle(){ let n=this.totalPage,s=this.currentPage; if(n<10){ return n } if(s<=5){ return [1,2,3,4,5,'...',n] }else{ return [1,'...',n-4,n-3,n-2,n-1,n] } } } })
script> body> html>

步骤如下:
1.cdn引入vue.js
2.实现简单布局
3.定义数据并且渲染数据到页面
4.定义事件(上一页,下一页,当前页)

点击事件:
上一页:如果当前页为第一页则将上一页的按钮禁用,否则就让当前页进行减减;
下一页:如果当前页为最后一页则将下一页的按钮禁用,否则就让当前页进行加加;
点击当前页:获取当前点击的页面,并且赋值data里面的定义的当前页数据;

改变分页的样式
定义一个计算属性然后在页面进行渲染
vue实现简单分页效果_第2张图片

你可能感兴趣的:(vue,vue)