vue使用全局过滤器格式化日期

mwsblue

于 2021-03-26 18:49:36 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/mwsblue/article/details/115252971

前端基础专栏收录该内容

16 篇文章

订阅专栏

此博客展示了如何在 Vue.js 中创建全局过滤器并应用于子组件。通过实例化 Vue 构造器，创建了一个名为 Profile 的子组件，并在其中使用了 'formatDate' 过滤器来格式化日期。过滤器实现了将日期转换为友好的显示格式，如 'YYYY-MM-DD HH:mm'。整个示例在 HTML 文件中进行，包括 Vue.js 库的引入和脚本内的 Vue 实例化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-demo1</title>
</head>
<body>
  <div id="app">
    <div id="profile"></div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //创建全局过滤器  并在子组件中使用
  Vue.filter('formatDate',function(date){
    let y = date.getFullYear();
    let m = date.getMonth() +1;
    let d = date.getDate();
    let h = date.getHours();
    let mm = date.getMinutes();

    y = y<10?'0'+y:y;
    m = m<10?'0'+m:m;
    d = d<10?'0'+d:d;
    h = h<10?'0'+h:h;
    mm = mm<10?'0'+mm:mm;

    return y+"-"+m+"-"+d+" "+h+":"+mm
  })

  //创建构造器
  var Profile = Vue.extend({
     template:`
     <div>
      <p>{{tips}}</p>
      <p>{{new Date() | formatDate}}</p>
     </div>
     `,
     data(){
       return {
         tips:"构造器创建一个子类"
       }
     }
   })
   //创建Profile实例，并挂载到元素上
   new Profile().$mount("#profile")

  var vm = new Vue({
     data(){
       return {
       }
     }
   })
   .$mount("#app")
   
</script>
</html>