上篇使用介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示。
表格数据
先定义一个数组来保存所有数据:
使用
v-for
指令来渲染,将tr标签改写成:
修改
其指令含义为:遍历
book_list
对象,将元素赋值给book
,索引赋值给key
,并且使用元素渲染该tr标签 值得注意的是: ① 应该使用v-text
来设置文本值,这样不会出现闪烁问题。 ② Vue2.0中,不支持隐式的$index,需要显式声明,例如上述代码中"(book,key) in book_list",key可以看做$index 数据渲染完了,但是看效果会知道,价格、更新时间需要做一些格式调整。 Vue1.0中对于价格的调整可以使用
也就是过滤器,但在Vue2.0中,已废弃默认过滤器了,这意味着我们需要自定义过滤器,并且注册到Vue对象中去。
不难写出currency
和date
过滤器为:
再次修改tr模板为:
值得注意的是:过滤器不能和v-text指令配合使用,下述代码无法生效:
修改后的表格效果如下:
分页展示
分页其实就是只显示原始数据中,索引值在某一个范围内的数据,可以理解为是一种数据的过滤处理. 如果知道了页容量,当前页码,原始数据集,就能计算出当前页要显示哪些数据。 页码从1开始,那么第N页的数据,他的索引(从0开始)范围应该是:(N - 1)*SIZE ~ N*SIZE - 1 由于"分页"这一动作具有普遍性,我们现在methods中定义一个
pageData
方法:值得注意的是:
slice
方法返回的是数组的原始元素,而不是数组的备份(copy)。 "当前页的数据" 我们使用计算属性来完成,而不是方法:值得注意的是:这里没什么值得好注意的。page_size、page_num是在data中定义的。
此时表格的数据集就得换成page_book_list了
页码
要渲染页码列表,必须先得到总页数,因为后期可能会增加关键字过滤,所以我们使用计算属性来得到总页数: 不足一页也要当一页来显示
页码列表的渲染使用v-for即可,参照bootstrap的页码html,不难写出:
«
»
值得注意的是:
①
@click
是绑定click事件,可以是函数执行,也可是是js代码执行 ②:class
是绑定class属性,格式是"样式名称: 条件",当条件为true时,才设置这个样式。 此处为何不用v-show?因为效果太难看了自定义页容量
这就很简单了,将页码下拉框改造一下即可,不难写出:
①
:value
是绑定value的值 ②v-model
会使得select的value与page_size
绑定,这个绑定双向的这里会出现一个小bug,即在切换页容量的时候,会导致总页数变化,有可能总页数会小于当前页。 于是在获取总页数的时候需要对当前页做一些变动:
ret) {
this.page_num = ret;
} else if (this.page_num < 1) {
this.page_num = 1;
}
return ret < 1 ? 1 : ret;;
}
本次效果图: