前端应用_Vue_全局过滤器的练习_定义时间格式化

最新推荐文章于 2022-03-19 10:19:08 发布

上海_彭彭

最新推荐文章于 2022-03-19 10:19:08 发布

阅读量410

点赞数

分类专栏： Vue.js 文章标签： Vue 过滤器时间格式化

本文链接：https://blog.csdn.net/qq_34979346/article/details/98954518

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

通过过滤器进行日期的格式化，代码如下：

   Vue.filter('myDateF',function(date){

            var date2=new Date(date)
            var y=date2.getFullYear()
            var m=date2.getMonth()
            var d=date2.getDate()
            return  y+'-'+ m+'-'+d
        }
        )

完成的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">


    </script>
</head>
<body>
<div id="pp" >
    <p >{{msg | myfilter}}</p>
    <label>日期</label>
    <input type="text" name="" id="" :value="date | myDateF">
   

</div>
<div>

    <script>
        Vue.filter("myfilter",function(msg){
            return msg.replace("爱情","狗屎")

        })
        Vue.filter('myDateF',function(date){

            var date2=new Date(date)
            var y=date2.getFullYear()
            var m=date2.getMonth()
            var d=date2.getDate()
            return  y+'-'+ m+'-'+d


        }
        )
 
        var vm = new Vue(
           
            {
            el: "#pp",
            data: {
                date: new Date(),
                msg: "曾经有一段真挚的爱情，摆在我面前，我没有珍惜，现在后悔莫及，如果再遇到这段爱情，我绝对抓住这个爱情"
            }
        }
        )

         
        
    </script>
</div>
</body>
</html>

效果达到了，如下：

日期显示了 2019-7-9
在这里插入图片描述