最后一章利用Vue.js制作了一个模仿Metronic的高级表(1)静态设计介绍了需求、原型设计和静态页面实现。本章说明如何使用Vue渲染数据并实现动态显示。

列表数据

首先定义一个数组来保存所有数据：

varvm=new vue({ El : ' # content }，data : { book _ list 3360[{ id :1，name:' standard Japanese '，type:' culture '，price:19.00，Time : 1492502043}，{id :2，name : ' microeconomics '，type:' economy '，price :39.00使用v-for命令进行渲染，并按如下方式重写tr标签:

tr v-for='(book，key)in book _ list ' Td v-text=' key 1 '/Td Td Td v-text=' book . name '/Td Td Td v-text=' book . type '/Td Td Td v-text=' book . price '/Td Td Td v-text=' book . time '/Td Td button class=' btnbtn-info BTN-xs ' I class=' fa fa-pencil '/I modify/button class=' btnbtn-danger TN-xs ' I class=' fa fa fa fa fa fa-pencil '

指令的意思是：遍历book_list对象，将元素赋给book，将索引赋给key，使用元素渲染tr标签。值得注意的是：应该使用v-text来设置文本值，这样就不会出现闪烁的问题。在Vue 2.0中，不支持隐式$index，需要显式声明。例如，在上面的代码中，'(book，key) in book_list '，key可以看作$index数据已经被渲染，但是从效果上就知道价格和更新时间需要一些格式调整。可以使用Vue1.0中的价格调整

{{book.price | currency}}

也就是过滤器，但是在Vue2.0中，默认的过滤器已经被放弃了，这意味着我们需要自定义过滤器并将其注册到Vue对象中。按如下方式编写货币和日期过滤器并不难：

Vue.filter('date '，function (timestamp) {让Date=new Date(timestamp * 1000)；让y=date . getfullyear()；让month=date . getmonth()1；让d=date . getdate()；让h=date . gethours()；让m=date . getminutes()；let s=date . getseconds()；返回“年”(第10个月？0': ' ')月'月'(d 10？0':'') d' day' (h 10？0':'') h ':' (m 10？0':'') m ':' (s 10？0 ' : ' ')s；});Vue.filter('currency '，function(money，unit，fixed){ if(isNaN(money)){ return“”；} if(type of fixed==' undefined ' | | ISnan(fixed)){ fixed=2 } if(type of unit==' undefined '){ unit=' '；}让num=parseFloat(钱)；返回单位num.toFixed(固定)；});再次修改tr模板以：

TD { { book }。价格|货币}}/tdtd {{book。time | date } }/t值得注意的是，过滤器不能与v-text指令结合使用，以下代码无法生效：

Tdv-text=' book。价格|货币/TD TD TD v-text=' book。时间|日期/TD修改后的表格具有以下效果：

分页演示文稿

分页实际上是在原始数据中只显示索引值在一定范围内的数据，可以理解为一种数据过滤过程。如果知道页面容量、当前页码和原始数据集，就可以计算当前页面应该显示哪些数据。页码从1开始，所以第N页(从0开始)数据的索引范围应该是：(N-1)*SIZE ~ N*SIZE-1。因为“分页”的动作是通用的，所以我们现在在方法中定义一个pageData方法：

methods: { pageData:函数(数据，page_size，page_num) { if(！(数组的数据实例)){ return[]；}让start=(page _ num-1)* page _ size；返回data.slice(start，start page _ size)；}}值得注意的是，slice方法返回的是数组的原始元素，而不是数组的副本。“当前页面的数据”是通过使用计算属性而不是方法完成的：

computed : { page _ book _ list : function(){ return this . page data(this . book _ list，this.page_size，this . page _ num)；}}值得注意的是，这里没有什么需要注意的。Page_size和page_num是在数据中定义的。此时，表的数据集必须由page_book_list替换。Trv-for=' (book，key)在page _ book _ list中'

页码

为了渲染页码列表，我们必须首先获得总页数，因为在后期可能会添加关键词过滤，所以我们使用计算属性来获得总页数：少于一页应该显示为一页

computed : { total _ page : function(){ let len=this . book _ list . length；让ret=ParSeint(len/this . page _ size)；if ((len % this.page_size)！=0){ ret；}返回ret 1？1 : ret；}}页码列表可以用v-for呈现，参考bootstrap的页码html不难写：

ul class=' pagination ' Li : class=' { disabled : page _ num=1 } ' @ click=' prePage()' a href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' I/I/a/Li Li v-for=' n in total _ page ' : class=' { active : page _ num=' n } ' a href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' v-text=' n ' @ click=' page _ num=n '/a/Li Li : class=' { disabled : page _ num=total _ page } ' @ click=' nextPage()' a href=' JavaScript :'Rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' i/i/a/li/ul值得注意的是：

(1) @ click是绑定click事件，可以是函数执行，也可以是js代码执行。(2) :class是绑定类属性，格式为‘样式名3360条件’。只有当条件为真时，才能设置这种样式。为什么不在这里用v-show？因为效果太难看了

自定义页面容量

这很简单，页码下拉框可以修改。不难写：

select class=' form-control ' v-model=' page_size ' option v-for=' size in[5，10，15，20]' : value=' size ' v-text=' size ' article ' '/option/select: value是绑定值的值 v-model会将select的值与page _ size绑定，而且这种绑定是双向的

这里会有一个小bug，就是页面容量切换时，总页数会发生变化，有可能总页数会小于当前页面。因此，在获取总页数时，有必要对当前页面进行一些更改：

total _ page : function(){ let len=this . book _ list . length；让ret=ParSeint(len/this . page _ size)；if ((len % this.page_size)！=0){ ret；} if(this . page _ num ret){ this . page _ num=ret；} else if(this . page _ num 1){ this . page _ num=1；}返回ret 1？1 : ret；}此渲染：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。