Vue全局过滤器的使用 运用在时间过滤 内容添加crud

复制代码
 过滤器的使用
    msgFormt是你自己定义的过滤器方法,
    Vue.filter是你自己定义的全局过滤器。没有s
    过滤器要有返回值哈  用retuen
    Vue.filter("msgFormt",function (msg,th) {
       //第一参数 msgFormt 是方法
       //第二个参数msg,是数据源,
       //第三个参数,是自己在  <p>{{ msg | msgFormt("飞宇") }}</p>  中传递的参数 ‘飞宇’
       return msg.replace(/单纯/g,th)
    });
 
复制代码

 

复制代码
<div id="app">
 <p>{{ msg | msgFormt }}</p>
     <!-- msgFormt是一个过滤器 -->
</div>

<script>
    Vue.filter("msgFormt",function(msg){
        return msg.replace(/单纯/g,"邪恶")
    })
    
var vm=new Vue({
   el:"#app",
   data:{
       msg:"我是一个单纯的少年,单纯的我,傻傻的问,谁是单纯的人"
   }   
})
</script>
复制代码

最后在页面输出  它会将原来的类容替换了

我是一个邪恶的少年,邪恶的我,傻傻的问,谁是邪恶的人

 

复制代码
<div id="app">
    <!--通过传递参数---可以随意的替换值-->
 <p>{{ msg | msgFormt("飞宇") }}</p>  <!-- msgFormt是一个过滤器 -->
</div>


<script>
    //定义一个全局过滤器---
        Vue.filter("msgFormt",function (msg,th) {
       return msg.replace(/单纯/g,th)
    });

    vm=new Vue({
        el:"#app",
        data:{
            msg:"单纯的我,单纯的问,谁是单纯的人"
        }
    });
复制代码

最后输出   飞宇的我,飞宇的问,谁是飞宇的人

 

posted @   南风晚来晚相识  阅读(237)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示