《Vue.j实战》一书 p130 页练习 1 & 2 试做

发布时间：2020-12-14 05:10:02 所属栏目：大数据来源：网络整理

导读：练习1 ：开发一个自定义指令v-birthday ，接收一个出生日期的时间戳，将它转换为己经出生了xxx 天。练习2 ：扩展练习1 的自定义指令v-birthday ，将出生了xxx 天转换为具体年龄，比如25 岁 8 个月10 天。 Demo在线效果浏览解答：为简便起见，在time.js

练习1 ：开发一个自定义指令v-birthday ，接收一个出生日期的时间戳，将它转换为己经出生
了xxx 天。
练习2 ：扩展练习1 的自定义指令v-birthday ，将出生了xxx 天转换为具体年龄，比如25 岁
8 个月10 天。

Demo在线效果浏览

解答：

为简便起见，在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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

《Vue.j实战》一书 p130 页练习 1 &amp; 2 试做

《Vue.j实战》一书 p130 页练习 1 & 2 试做