function pushDom(data){ // 使用vue自定义过滤器把接口中传过来的时间进行整形 Vue.filter('time', function (value) { return goodTime(value); }) var vm = new Vue({ el: '.list', data: data }); }
并且,我们需要修改我们的html部分,如下:
<time v-text="info.create_at | time"></time>
好,实现效果是一模一样的.但是代码看上去优雅了很多.关键是,我们在这个过程中,学习和掌握了自定义过滤器的使用.其实,在很多情况下,接口给我们的数据往往是不适合直接在页面中渲染的,所以这个功能就是非常重要并且非常常用的了.
小结
1.v-bind 绑定元素属性方法
2.v-text 输出文本方法
3.vue 自定义过滤器的使用
附录
VUE官方网站
cNodeJs Api 详细介绍
本系列教程源码下载
VUEJS 实战教程第一章,构建基础并渲染出列表
VUEJS 实战教程第二章,修复错误并且美化时间
VUEJS 实战教程第三章,利用laypage插件实现分页