VUEJS实战之修复错误并且美化时间(2)
前言
在中,我们通过基础的搭建,成功的渲染了列表页面.,其中的问题是很多的.这一章,我们来解决这些问题.
使用 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../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../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/(7day), _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啊,这算哪门子学习呢….
好,我们狼蚁网站SEO优化用VUE的自定义过滤器功能来进行处理.
官方教程,自定义过滤器 http://vuejs../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原创
首发地址:
本文已被整理到了《》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程