在php中用vue写分页,vue.js分页如何写

刚好开始学vue，第一个练手的就是分页。

先看个效果图：

我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。我们如何知道？打开你的浏览器的控制台(就在这个页面打开)，并修改 app.message，你将看到上例相应地更新。

再次打开浏览器的 JavaScript 控制台输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 属性的 HTML 已经进行了更新。

只需要改变data里面的数据，页面渲染的数据就自动更改了，对于只用过jq的我来说，好叼有木有~

那么通过v-for渲染一个表格，给分页按钮加上点击事件获取数据更改v-for的数据，就能自动分页啦。

html:

{{todo.title}}

{{todo.learn_name}}

{{todo.is_exist}}

{{todo.is_download}}

{{list.page}}

var data = new Vue({

el:'#data',

data:{

datas:[

{

title: '<?php echo $value["title"]?>' ,

learn_name: '<?php echo $value["learn_name"]?>',

is_exist: '<?php echo $value["is_exist"]?>',

is_download: '<?php echo $value["is_download"]?>'

},

]

}

});

new Vue({

el:'#page',

data:{

lists:[

{page:1},

{page:2},

{page:3},

{page:4}

]

},

methods:{

clickEvent:function (page) {

url = '<?php echo Yii::$app->urlManager->createUrl("/collect-data-copy/result")?>';

$.post(url,{page:page},function (res) {

data.datas = res;

},'json');

}

}

});