vue过滤器(filter)的使用
过滤器分全局过滤器和局部过滤器
<div id="app">
<p>电脑价格:{{price | addPriceIcon}}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
//处理函数
addPriceIcon(value){
console.log(value)//200
return '¥' + value
}
}
})
上边代码,
我的需求是想把价格前面加上人民币符号(¥),
模板中文本后边需要添加管道符号( | )作为分隔,管道符 | 后边是文本的处理函数,
处理函数的第一个参数是:管道符前边的——文本内容,(注意)
如果处理函数上边传递参数,则从第二个参数依次往后是传递的参数。(注意)
可能有人会问:你手动加上去不就得了!如果页面有上千个价格需要添加,
怎么办?几十个页面需要添加怎么办呢,手动加能累晕!所以这种通用机制很重要。
全局过滤器
<div id="app">
<h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
Vue.filter("addNamePrefix",(value)=>{
return "my name is" + value
})
let vm = new Vue({
el:"#app",
data:{
viewContent:"吕星辰"
}
})
上边代码,全局过滤器,
参数一:是过滤器的名字,也就是管道符后边的处理函数;
参数二:处理函数,处理函数的参数同上。。。
参考地址:https://blog.csdn.net/qq_42778001/article/details/95613371
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。