上篇使用介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用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,即在切换页容量的时候,会导致总页数变化,有可能总页数会小于当前页。 于是在获取总页数的时候需要对当前页做一些变动:
本次效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。