vue单页组件化案例

vue单页组件化案例

1.单页分页

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .pagination {
            margin: 20px 0;
        }
        
        .pagination a {
            padding: 5px 12px;
            border: 1px solid #3ba9ff;
            text-decoration: none;
            margin: 5px;
        }
        
        .pagination a.active {
            background: #3ba9ff;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="a of geteveypage">
                {{a.name}}
            </li>
        </ul>

        <div class="pagination">
            <a href="#" @click="previouspage()"> 上一页</a>
            <a href="#" @click.prevent="start=i" v-for="(p,i) in getpage" :class="{active:p===start+1}"> {{p}} </a>
            <a href="#" @click="next()">下一页</a>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            users: [{
                id: 1,
                name: '小达'
            }, {
                id: 2,
                name: '小涛'
            }, {
                id: 3,
                name: '小冯'
            }, {
                id: 4,
                name: '小金'
            }, {
                id: 5,
                name: '小宝'
            }, {
                id: 6,
                name: '小子'
            }, {
                id: 7,
                name: '小武'
            }, ],
            eveypage: 3, //每页显示条数
            start: 0 //起始位置
        },
        computed: {
            //获取页数
            getpage() {
                return Math.ceil(this.users.length / this.eveypage)
            },
            //截取每页展示具体数据
            geteveypage() {
                console.log("截取每页展示具体数据");
                let qs = this.start * this.eveypage; //0*3
                return this.users.slice(qs, this.eveypage + qs)
            }
        },
        methods: {
            //上一页
            previouspage() {
                if (this.start > 0) {
                    this.start--;
                    console.log(this.start);
                }
            },
            next() {
                if (this.start < this.getpage - 1) {
                    this.start++;
                    console.log(this.start);
                }
            }

        },

    })
</script>

</html>

2组件化单页面分页

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .pagination {
            margin: 20px 0;
        }
        
        .pagination a {
            padding: 5px 12px;
            border: 1px solid #3ba9ff;
            text-decoration: none;
            margin: 5px;
        }
        
        .pagination a.active {
            background: #3ba9ff;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item of geteachpage">
                {{item.name}}
            </li>
        </ul>
        <chlid :getpage='getpage' :start='start' @xiugaistart='jieshou' />
        <!--子传父3--->
        <!--父传子3 :getpage='getpage' :start='start'-->
    </div>

    <template id="chlidren">
            <div class="pagination">
                <a href="#" @click="pre">上一页</a>
                <a href="#" v-for="(p,i) in getpage" @click.prevent="startzi=i" :class="{active:p===startzi+1}">{{p}}</a>
                <!--父传子1  找到子组件中传过去的参数  getpage  start -->
                <a href="#" @click="next">下一页</a>
            </div>
         </template>

    <script>
        //子组件
        Vue.component("chlid", {
            props: ['getpage', 'start'], // 父传子2  参数放到子组件中
            template: '#chlidren',
            data() {
                return {
                    startzi: this.start //子传父1
                }
            },
            updated() {
                this.$emit("xiugaistart", this.startzi) //子传父2
            },
            methods: {
                pre() {
                    if (this.startzi > 0) {
                        this.startzi--
                            console.log(this.startzi);
                    }
                },
                next() {
                    if (this.startzi < this.getpage - 1) {
                        this.startzi++
                            console.log(this.startzi);
                    }
                }
            }
        })


        new Vue({
            el: '#app',
            data: {
                users: [{
                    id: 1,
                    name: '小达'
                }, {
                    id: 2,
                    name: '小涛'
                }, {
                    id: 3,
                    name: '小冯'
                }, {
                    id: 4,
                    name: '小金'
                }, {
                    id: 5,
                    name: '小宝'
                }, {
                    id: 6,
                    name: '小子'
                }, {
                    id: 7,
                    name: '小武'
                }, ],
                eachpage: 3, //每一页显示条数
                start: 0 //起始位置
            },
            computed: {
                getpage() {
                    // 页数=总条数/每页显示条数
                    return Math.ceil(this.users.length / this.eachpage)
                },
                // 获取每页显示具体数据
                geteachpage() {
                    let qs = this.start * this.eachpage;
                    return this.users.slice(qs, this.eachpage + qs)
                }
            },
            methods: {
                jieshou(i) {
                    this.start = i //子传父4
                },
                //上一页
                pre() {
                    if (this.start > 0) {
                        this.start--
                            console.log(this.start);
                    }
                },
                //下一页
                next() {
                    if (this.start < this.getpage - 1) {
                        this.start++
                            console.log(this.start);
                    }
                }
            }
        })
    </script>
</body>

</html>

内含父子组件通信

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页