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

最新推荐文章于 2024-08-25 09:57:22 发布

mwsblue

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量214

点赞数

分类专栏：前端基础文章标签： Vue.js 构造器过滤器子组件日期格式化

本文链接：https://blog.csdn.net/mwsblue/article/details/115252971

版权

前端基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>

mwsblue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue使用全局过滤器格式化日期

<!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&l
复制链接

扫一扫

专栏目录