VUEJS实战之修复错误并且美化时间(2)


Posted in Javascript onJune 13, 2016

前言

在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题.

使用 v-bind 绑定数据.

上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示:

VUEJS实战之修复错误并且美化时间(2)

这是因为页面进来的时候,会先执行我们的html代码,而此时,我们的vue还没开始工作.而我们的代码如下:

<li v-for="info in data">
 <i class="user_ico">
 <img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}">
 <span>{{ info.author.loginname }}</span>
 </i>
 <time class="time">{{ info.create_at }}</time>
 <a class="talk" href="content.html?{{ info.id }}">{{ info.title }}</a>
</li>

如上,页面去解析 src="{{ info.author.avatar_url }}"的时候,当然是找不到这个图片路径的.因此,自然而然会出错.因此,我们需要来处理一下这个代码.我们修改为

<img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname">

好,我们刷新一下页面,这一次,就没有报错了.

VUE知识点

v-bind 绑定属性 http://vuejs.org.cn/api/#v-bind

补充:

其实,我们打开页面的时候,还是可以在一瞬间看到这些 {{ ... }} 的内容.虽然这个不会报错,但是还是影响了一点点用户体验.这个时候,我们可以用 v-text 来输出这些内容,如上,我们把代码修改为如下:

<li v-for="info in data">
 <i class="user_ico">
 <img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname">
 <span v-text="info.author.loginname"></span>
 </i>
 <time class="time" v-text="info.create_at"></time>
 <a class="talk" href="content.html?{{ info.id }}" v-text="info.title"></a>
</li>

当我们把代码修改成这样之后,所有的问题就都解决了.

VUE知识点

v-text 输出文本 http://vuejs.org.cn/api/#v-text

美化时间

我们从接口获取的时间格式是这样的2016-06-12T06:17:35.453Z,很显然,这不是我们想要的效果.我们想要的效果应该是这样的 发表于2小时之前 这样的效果.怎么做呢?

我们需要一个函数,这个函数的作用是给他一段原始的字符串,然后返回一个我们想要的字符串.

关于这个函数的原理,不是我们的重点,这里不解释,直接看代码如下:

function goodTime(str){
 var now = new Date().getTime(),
 oldTime = new Date(str).getTime(),
 difference = now - oldTime,
 result='',
 minute = 1000 * 60,
 hour = minute * 60,
 day = hour * 24,
 halfamonth = day * 15,
 month = day * 30,
 year = month * 12,

 _year = difference/year,
 _month =difference/month,
 _week =difference/(7*day),
 _day =difference/day,
 _hour =difference/hour,
 _min =difference/minute;
 if(_year>=1) {result= "发表于 " + ~~(_year) + " 年前"}
 else if(_month>=1) {result= "发表于 " + ~~(_month) + " 个月前"}
 else if(_week>=1) {result= "发表于 " + ~~(_week) + " 周前"}
 else if(_day>=1) {result= "发表于 " + ~~(_day) +" 天前"}
 else if(_hour>=1) {result= "发表于 " + ~~(_hour) +" 个小时前"}
 else if(_min>=1) {result= "发表于 " + ~~(_min) +" 分钟前"}
 else result="刚刚";
 return result;
}

代码有借鉴别人的代码的部分.

好,现在,我们可以通过一个goodTime(str)的方法函数,来将接口给我们的时间格式修改为我们想要的.现在的问题就是,我们怎么来用这个函数了.

笨方法,直接修改原始数据

首先,我们通过ajax拿到了数据,然后再把数据交给vue进行渲染.那我们在这个中间可以进行一个操作,把所有的数据全部处理一遍,然后把处理过的数据再交给vue去渲染.就可以解决这个问题了.

说干就干,我们看代码:

function pushDom(data){
 // 先进行遍历,把数据中的所有时间全部修改一遍
 for (var i = 0; i < data.data.length; i++) {
 data.data[i].create_at = goodTime(data.data[i].create_at);
 };
 // 然后再交给 vue 进行渲染
 var vm = new Vue({
 el: '.list',
 data: data
 });
}

好,通过上面的处理,我们再来看一下最终的页面效果.如下:

VUEJS实战之修复错误并且美化时间(2)

成功了.

VUE自定义过滤器方法

上面虽然我们成功了.但是,直接在VUE之前搞了一个for循环,实在是有点不太优雅.而且,我们要学习VUE啊,这算哪门子学习呢….

好,我们下面用VUE的自定义过滤器功能来进行处理.

官方教程,自定义过滤器 http://vuejs.org.cn/guide/custom-filter.html

function pushDom(data){
 // 使用vue自定义过滤器把接口中传过来的时间进行整形
 Vue.filter('time', function (value) {
 return goodTime(value);
 })
 var vm = new Vue({
 el: '.list',
 data: data
 });
}

并且,我们需要修改我们的html部分,如下:

<time class="time"  v-text="info.create_at | time"></time>

好,实现效果是一模一样的.但是代码看上去优雅了很多.关键是,我们在这个过程中,学习和掌握了自定义过滤器的使用.其实,在很多情况下,接口给我们的数据往往是不适合直接在页面中渲染的,所以这个功能就是非常重要并且非常常用的了.

小结
 1.v-bind 绑定元素属性方法
 2.v-text 输出文本方法
 3.vue 自定义过滤器的使用

附录

本文由FungLeo原创

首发地址:http://blog.csdn.net/FungLeo/article/details/51649074

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
JS自定义滚动条效果
Mar 13 Javascript
Bootstrap表单Form全面解析
Jun 13 #Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
多种jQuery绑定事件的实现方式
Jun 13 #Javascript
JS Ajax请求如何防止重复提交
Jun 13 #Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
平面设计专业大学生职业规划书
2014/03/12 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
公务员培的训心得体会
2014/09/01 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年协会工作总结
2014/11/22 职场文书
大专护理专业自荐信
2015/03/25 职场文书
不同意离婚上诉状
2015/05/23 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL