摸鱼少学习多

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 @   北海之上  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
·  day107-过滤器与监听器
·  day56- 数据代理
·  Vue 局部过滤器和全局过滤器
·  Vue过滤器
·  Vue.js 过滤器
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
/* 粒子吸附*/
点击右上角即可分享
微信分享提示