Vue中定义私有过滤器

最新推荐文章于 2024-03-27 19:03:39 发布

键盘的打工仔

最新推荐文章于 2024-03-27 19:03:39 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105374570

版权

人在,塔在

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

键盘的打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中定义私有过滤器

人在,塔在<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>私有过滤器</title> <script src="../../vue/vue.js"></script></hea...
复制链接

扫一扫