练习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>