过滤器的使用
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:"单纯的我,单纯的问,谁是单纯的人"
}
});
最后输出 飞宇的我,飞宇的问,谁是飞宇的人
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。