0
点赞
收藏
分享

微信扫一扫

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

萨科潘 2022-09-01 阅读 22

过滤器的使用
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:"单纯的我,单纯的问,谁是单纯的人"
}
});

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

 

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。


作者:晚来南风晚相识​

本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接

如果文中有什么错误,欢迎指出。以免更多的人被误导。



举报

相关推荐

0 条评论