Vue多页列表动态渲染

正在做的项目与web开发相关(纯前端新手),这个博客用于更新前端开发中遇到的小问题的解决方案,主要目的是给自己记个备忘录,但是如果能帮助到除我以外的任何人那我的bug就没白改(笑)。

第一个列出的问题是今天新鲜出炉的,来自Vue的列表渲染(传送门:列表渲染 — Vue.js)。简单的单页渲染直接调试Vue文档的案例即可,这里记录一下实现多页列表动态渲染的方法,无比感谢同组的Neil老哥(我自己可能改到期末去了=.=)。

JavaScript:

    var list =new Vue({
        el:'路径',
        data: {
            message //传给html页面的目标值,此处为空,在下方methods内赋值
        },
        methods:{
            async Default(){
                $.post({
                    data: 传给后端的值,
                    url:'后端接口',
                    //async:false,
                    success:function(data){  //接收后端返还
                        list.message = data  //赋值
                    },
                    error:function(e){
                        alert("failed")
                    }
                })
            },
            async pageTwo(page){     //此处page为html页面onclick传值
                $.post({
                    data: 传给后端的值,
                    url:'后端接口',
                    //async:false,
                    success:function(data){
                        list.message = data 
                    },
                    error:function(e){
                        alert("failed")
                    }
                })
            }
        },
        created(){                  //默认访问进入默认函数,通常为列表第一页
            this.Default()
        }
    })

HTML(class内为bootstrap按钮样式,传送门:全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网):

<li><a class="btn btn-default"role="button" v-on:click="pageTwp(2)">2</a></li>

整体逻辑是:列表在默认情况下会自动读取Default函数,获取后端传值并渲染;点击了html页面的页面"2"后,会执行pageTwo函数并更新值,Vue列表也会自动更新渲染。

这个方法需要注意一点点小问题:在ajax的post函数里给this.message赋值的话,值仅会作用在post函数内而无法传入vue列表,因此一定要直接使用对象名。

............................................................................END.......................................................................

之前开发中遇到的问题慢慢回忆慢慢写,不写出来总感觉很快就会忘掉(确实是很快就会忘掉)。虽然我是个纯前端新手,还是希望写出来的东西能帮到除了我以外的人。

上一篇:【中亦安图】Systemstate Dump分析经典案例(8)


下一篇:SpringBoot中使用@Async异步并行执行任务