Vue 知识点：过滤器

Vue 知识点：过滤器

总结：
    定义：对要显示的数据进行特定格式化后再显示【适用于一些简单逻辑的处理】
    语法： 
        1.注册过滤器：Vue.filter(name,callback) 或 new Vue({filters:{}})
        2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"
    备注：
        1.过滤器也可以接收额外的参数、多个过滤器也可以串联
        2.并没有改变原本的数据，是产生新的对应的数据

//引入第三方插件库
<script src="../js/dayjs.min.js"></script>

<div id="root">
     <h2>显示格式化后的时间</h2>
     // 计算属性实现
     <h3>现在是：{{fmtTime}}</h3>
     // methods实现
     <h3>现在是：{{getFmtTime()}}</h3>
     //过滤器实现
     <h3>现在是：{{time | timeFormater}}</h3>
     //过滤器实现（传参）
     <h3>现在是：{{time | timeFormater2(YYYY-MM-DD)}}</h3>
     //多个过滤器的串联
     <h3>现在是：{{time | timeFormater2(YYYY-MM-DD) | mySlice}}</h3>

     <h3 :x="msg | mySlice">2022</h3>
</div>
<div id="root2">
    <h2>{{msg | mySlice}}</h2>
</div>

<script>
    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    
    new Vue({
        el:'#root',
        data:{
           time:1646289413737, //时间戳
           msg:'你好，2022'
        },
        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:{
           timeFormater(value){
             return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
           },
           timeFormater2(value,str='YYYY年MM月DD日 HH:mm:ss'){// es6形参写法
             return dayjs(value).format(str)
           },
           mySlice(value){
             return value.slice(0,4)
           }
        }
    })
    new Vue({
         el:'#root2',
         data:{
            msg:'hello,jiaqikauile'
         }
    })
</script>