VUEJS实战之修复错误并且美化时间(2)
作者:FungLeo 发布时间:2023-07-02 17:01:24
前言
在上一章中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题.
使用 v-bind 绑定数据.
上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示:
这是因为页面进来的时候,会先执行我们的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
});
}
好,通过上面的处理,我们再来看一下最终的页面效果.如下:
成功了.
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 自定义过滤器的使用
附录
VUE官方网站
cNodeJs Api 详细介绍
本系列教程源码下载
VUEJS 实战教程第一章,构建基础并渲染出列表
VUEJS 实战教程第二章,修复错误并且美化时间
VUEJS 实战教程第三章,利用laypage插件实现分页
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
猜你喜欢
- 初步认识对于熟悉matplotlib三维画图的人来说,最常用的应该是plot_surface,但这个函数的绘图逻辑是,将xy平面映射到z轴,
- 目的把字符串逐字符或逐词反转过来,这个蛮有意思的。方法先看逐字符反转吧,第一种设置切片的步长为-1revchars=astring[::-1
- 1、Dreamweaver中的复制我在网页中复制的文字,粘贴到Dreamweaver中时,它总是带有原来网页的格式,请问如何只复制其中的文本
- 1 K-means算法实际上,无论是从算法思想,还是具体实现上,K-means算法是一种很简单的算法。它属于无监督分类,通过按照一定的方式度
- 1. 需要的库, redispip install redis2. 连接Redisimport redisclass RedisCtrl(o
- 前言大家应该都有所体会,在windows系统使用久了就会产生一些“垃圾”文件。这些文件有的是程序的临时文件,有的是操作记录或日志等。垃圾随着
- Logminer是每个Dba都应熟悉的工具,当一天由于用户的误操作你需要做不完全的恢复时,由于你无法确定这个操作是哪个时间做的,所以这对你的
- 本文实例讲述了Python实现获取照片拍摄日期并重命名的方法。分享给大家供大家参考,具体如下:python获取照片的拍摄日期并重命名。不支持
- 在平时的需求开发中涉及到将多列值合并为一列值的操作,通过查阅相关资料特此记录以下方法,方便日后学习复盘 import pandas
- 本文实例讲述了Python中@property的理解和使用。分享给大家供大家参考,具体如下:重看狗书,看到对User表定义的时候有下面两行
- 在项目中遇到需要支持上传gif图片,并把其分解的帧图片一次展示给用户。话不多说直接上代码分解gif图片需要使用libgif-js这个库!1.
- 概述在日常工作生活中,都是利用个人或公司的邮箱客户端进行收发邮件,那么如何打造一款属于自己的邮箱客户端呢?本文以一个简单的小例子,简述如何通
- 本文实例讲述了PHP5.6读写excel表格文件操作。分享给大家供大家参考,具体如下:测试环境:php5.6.24.这块没啥兼容问题。需要更
- 简介:PyInstaller可以将Python源代码发布成Win/MacOS等系统中的可执行文件。对开发者而言隐藏了源码实现,保护了知识产权
- 定时关机,功能:windows下,用户按照一定格式输入关机时间,系统到指定时间自动关闭 思路:从用户输入获取指定时间 分别以时分秒减去当前时
- 1、安装flask_sqlalchemy和pymysql包pip install flask-sqlalchemypip install p
- 首先谈谈它们的共同点吧:它们本质上都是一种对资源的独占锁定,都是由并发引起(如果数据库只有一个session,就谈不上锁定)。接着着重谈谈它
- 这篇文章主要介绍了基于python实现蓝牙通信代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 简介:在Windows下的网易邮箱大师客户端中,阅读邮件时,可以使用快捷键Delete删除邮件,然后自动跳到下一封,如果再按一次Delete
- 一、概述OpenCV在V4.5.3版本的contrib包中提供了一个barcode::BarcodeDetector类,用于条形码的识别。二