Vue中定义私有过滤器

人在,塔在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>私有过滤器</title>
    <script src="../../vue/vue.js"></script>

</head>
<body>
<div id="app">
    <p>{{ dt | dateFormat('yyyy-mm-dd')}}</p>
</div>
</body>
<script>
    var vm = new Vue({
       el: '#app',
       data: {
           dt: new Date()
       },
       filters: { //当全局过滤和私有过滤器同时存在时,遵循就近原则 (调用私有的过滤器)

           // 第一个参数是管道符(|)前面的值,第二个参数是自定义的
           dateFormat(dateStr, pattern='') {
               var y = dateStr.getFullYear();
               //因为月份是从0开始计算的所以得加1
               var m = dateStr.getMonth() + 1;
               var d = dateStr.getDate();

               if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                   return `${y}-${m}-${d}`
               }else {
                   var hh = dateStr.getHours();
                   var mm = dateStr.getMinutes();
                   var ss = dateStr.getSeconds();
                   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
               }
           }
       }
    });
</script>
</html>
发布了62 篇原创文章 · 获赞 0 · 访问量 1247

猜你喜欢

转载自blog.csdn.net/weixin_45616246/article/details/105374570