《Vue.j实战》一书 p130 页练习 1 & 2 试做
练习1 : 开发一个自定义指令v-birthday ,接收一个出生日期的时间戳,将它转换为己经出生
了xxx 天。
练习2 : 扩展练习1 的自定义指令v-birthday ,将出生了xxx 天转换为具体年龄,比如25 岁
8 个月10 天。
解答:
为简便起见,在time.js中,重新改造了下Time对象,由2个函数组成,分别接受一个时间戳为参数,返回字符串tip。
同时,写了了个指令,一个是 birthday 指令,输出显示出生了多少天,另一个是updatebirthday,显示多少岁多少月多少天。
export var Time={ getFormatDates(timestamp){ var dates = Math.floor(timestamp / 86400); var tip = '您已经出生了 ' + dates +' 天'; return tip; }, getFormatAges(timestamp){ var dates= Math.floor(timestamp / 86400); var year = Math.floor(dates / 365); var remains = Math.floor(dates % 365); var month = Math.floor(remains / 31); var day = Math.floor(remains % 31); var tip= '您今年 ' +year + ' 岁 ' + month + ' 月 ' + day + ' 天'; return tip; } }; export var birthday={ bind(el,binding){ el.innerHTML=Time.getFormatDates(binding.value); } }; export var updatebirthday={ bind(el,binding){ el.innerHTML=Time.getFormatAges(binding.value); } }
app.vue
<template> <div id="app"> <div v-birthday="times"></div> <div v-updatebirthday="times"></div> </div> </template> <script> import {Time, birthday, updatebirthday} from './components/time'; export default { directives:{ birthday:birthday, updatebirthday:updatebirthday }, data(){ return{ times:810691200 } } } </script>