少学习多摸鱼

day68 - 过滤器

过滤器

对需要显示的数据进行特定的格式化后再显示，适用于简单的逻辑处理

可以使用计算属性或methods实现过滤器

本例子使用当前的时间戳，分别使用三种方法在页面上显示当前时间戳

并转化成规定格式时间

 <body>
 <!--
     过滤器：
     对需要显示的数据进行特定的格式化后再显示，适用于简单的逻辑处理
     语法：
     1.注册过滤器 Vue.filter(name,callback) 或者 new Vue(filters:{})
     2.使用过滤器 {{xxx | 过滤器名字}} 或者 v-bind:属性 = “xxx | 过滤器名字”
 ​
     备注：
     1. 过滤器也可以接受额外的参数，多个过滤器可以串联
     2. 并没有改变原本的数据，是产生新的对应的数据
 -->
 <div id="root">
     <h2>显示格式化后的时间</h2>
 <!--  计算属性实现-->
     <h3>现在是：{{fmtime}}</h3>
 <!--  methods实现-->
     <h3>现在是：{{getgmtime()}}</h3>
 <!--  过滤器实现-->
     <h3>现在是：{{time | timeformater}}</h3>
 <!--  过滤器的传参-->
     <h3>现在是：{{time | timeformater('YYYY-MM-DD')}}</h3>
 <!--  过滤器的串联-->
     <h3>现在是：{{time | timeformater('YYYY-MM-DD') | myslice}}</h3>
 </div>
 ​
 </body>
 <script>
     Vue.config.productionTip = false
     //全局过滤器
     Vue.filter('myslice',function (val) {
         return val.slice(0,4)
     })
     new Vue({
         el:'#root',
         data:{
             time:1675432255528
         },
         computed:{
             fmtime(){
                 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
             }
         },
         methods:{
             getgmtime(){
                 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
             }
         },
         //局部过滤器
         filters:{
             timeformater(val,str="YYYY年MM月DD日 HH:mm:ss"){
                return  dayjs(val).format(str)
             },
             myslice(val){
                 return val.slice(0,4)
             }
         }
     })
 </script>

 

总结

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

 

可以在创建vue时设置局部过滤器：

 filters:{
     timeformater(val,str="YYYY年MM月DD日 HH:mm:ss"){
        return  dayjs(val).format(str)
     },
     myslice(val){
         return val.slice(0,4)
     }
 }

 

当有多个实例对象时，可能需要同时调用一个过滤器

此时可以创建一个全局过滤器

 //全局过滤器
 Vue.filter('myslice',function (val) {
     return val.slice(0,4)
 })

 

over

posted @ 2023-02-08 16:42  北海之上  阅读(9)  评论(0)    收藏  举报
/* 粒子吸附*/