这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
Vue.js 通过简洁的 API 提供高效的数据绑定和灵活的组件系统. 这篇文章主要介绍了 vue.js 表格分页 ajax 异步加载数据的相关资料, 需要的朋友可以参考下
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的 API。
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。
1. 注册一个组件
js
- Vue.component('pagination', {
- template: '#paginationTpl',
- replace: true,
- props: ['cur', 'all', 'pageNum'],
- methods: {
- //页码点击事件
- btnClick: function(index) {
- if (index != this.cur) {
- this.cur = index
- }
- }
- },
- watch: {
- "cur": function(val, oldVal) {
- this.$dispatch('page-to', val)
- }
- },
- computed: {
- indexes: function() {
- var list = []
- //计算左右页码
- var mid = parseInt(this.pageNum / 2); //中间值
- var left = this.cur - mid;
- var right = Math.max(this.cur + this.pageNum - mid - 1, this.pageNum);
- if (left < 1) {
- left = 1
- }
- if (right > this.all) {
- right = this.all
- }
- while (left <= right) {
- list.push(left) left++
- }
- return list;
- },
- showLast: function() {
- if (this.cur == this.all) {
- return false
- }
- return true
- },
- showFirst: function() {
- if (this.cur == 1) {
- return false
- }
- return true
- }
- }
- });
模板:
- <script type="text/template" id="paginationTpl">
- < nav v -
- if = "all > 1" > <ul class = "pagination" > <li v -
- if = "showFirst" > <a href = "javascript:"@click = "cur--" > « < /a></li > <li v -
- for = "index in indexes": class = "{ 'active': cur == index}" > <a@click = "btnClick(index)"href = "javascript:" > {
- {
- index
- }
- } < /a>
- </li > <li v -
- if = "showLast" > <a@click = "cur++"href = "javascript:" > » < /a></li > <li > <a > 共 < i > {
- {
- all
- }
- } < /i>页</a > </li>
- </ul > </nav>
- /
- </script>
html:
- <div id='parentEle'>
- ...
- <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList">
- </pagination>
- </div>
当点击分页链接的时候,会触发
page-to
事件,而我们在 html 标签中指定了使用父组件
loadList
方法处理事件,我们只要在组件中把当前页码传给父组件即可,父组件负责 ajax 加载数据,并更新自身的 pageAll 值。
来源: http://www.phperz.com/article/17/0504/331077.html