Vue多页列表动态渲染

本文主要是介绍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.......................................................................

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

这篇关于Vue多页列表动态渲染的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！