Vue 将秒转化为时分秒

1.在项目中,请求后台接口返回的值是秒,插值语法到页面上效果:如下图

   <el-col :span="6">
       <div class="grid-content bg-purple bg-purpleFour">
         运行时长
          <p>{{ runTime}}</p>
        </div>
  </el-col>

 

2.创建Vue过滤器filters和formatSeconds函数,跟钩子函数平级

//vue过滤器filters,跟钩子函数平级
  filters: {
    //创建函数名formatSeconds
    formatSeconds(value) {
      let result = parseInt(value);

      let y =
        Math.floor(result / 86400) < 10
          ? "0" + Math.floor(result / 86400)
          : Math.floor(result / 86400);

      let h =
        Math.floor((result / 3600) % 24) < 10
          ? "0" + Math.floor((result / 3600) % 24)
          : Math.floor((result / 3600) % 24);

      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);

      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);

      let res = "";
      if (y !== "00") res += `${y}天`;

      if (h !== "00") res += `${h}时`;

      if (m !== "00") res += `${m}分`;

      res += `${s}秒`;

      return res;
    },
  },

3.使用刚才创建完的函数 formatSeconds,页面就可以渲染成时分秒效果了

<el-col :span="6">
        <div class="grid-content bg-purple bg-purpleFour">
          运行时长
          <p>{{ runTime | formatSeconds }}</p>
        </div>
</el-col>