vue 时间过滤器

过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}
2.使用过滤器: {{ xxx|过滤器名}}或v-bind:属性 ="xxx|过滤器名”

备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

<!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时间过滤器</title>
        <!-- 引用vue文件 -->
        <script type="text/javascript" src="../study01/js/vue.js"></script>
        <!-- Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样.  -->
        <script type="text/javascript" src="../study01/js/dayjs.min.js"></script>
        <!-- 
            Day.js 有很多 API 来解析、处理、校验、增减、展示时间和日期

            dayjs('2018-08-08') // 解析

            dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示

            dayjs()
            .set('month', 3)
            .month() // 获取

            dayjs().add(1, 'year') // 处理

            dayjs().isBefore(dayjs()) // 查询 -->
    </head>
    <body>
       
        <div id="root">
            <h1>过滤后的时间格式</h1>
            <!-- 计算属性实现 -->
            <h3>现在是:{{fmtTime}}</h3>
            <!-- methods  实现 -->
            <h3>现在是:{{getFmtTime()}}</h3>
             <!-- 过滤器  实现   | 管道符-->
             <h3>现在是:{{time | timeFmatetr}}</h3>
             <!-- 过滤器传参 -->
             <h3>现在是:{{time | timeFmatetr('YYYY_MM_DD') | myCos}}</h3>
           </div>
           <!-- 第二个容器  div -->
           <div id="root2">
               <p>{{msjtext | myCos}}</p>
           </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;//阻止运行时提示开发版本
            //全局过滤器  关键词 filter 
            Vue.filter('myCos',function(value){
                return value.slice(0,4)//截取前四位
                }
            )
              new Vue({
                el:"#root",
                data:{
                    time:1637559917972   //时间戳
                },
                //计算属性
                computed:{
                fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
              }
             },
             methods: {
                getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
             },
             //局部过滤器  用关键词：filters
             filters:{
                timeFmatetr(value,str='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                // myCos(value){
                //     return value.slice(0,2)//截取前四位
                // }
             }
         })
         
        //  第二个vue 实例’
    new Vue({
        el:'#root2',
        data:{
            msjtext:'wdgrvword'
        }
    })
        </script>
    </body>                                                            
  </html>

　　

posted @ 2021-11-22 14:32  And杰然  阅读(466)  评论(0)    收藏  举报