Vue.jpeg
📝【Vue】学习养成记，【程序员必备小知识】
📔 今日小知识——Vue过滤器filters
1. 什么是过滤器？
说到过滤，我们生活中也经常有过滤的操作，洗菜用筛子过滤掉水，实验室做化学实验过滤掉杂质。
而开发中的过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
2. 过滤器的定义和举例
过滤器分为局部和全局过滤器
- 局部过滤器
new Vue({
filters: {
'过滤器名称': function (value1[,value2,...] ) {
// 逻辑代码
}
}
})
举例
一般银行账户的金额，都需要一定的格式化，保留2位小数
//格式
<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
- html
template>
<div>
<h3>过滤器</h3>
<h4>格式化工资</h4>
<p>{{money|moneyFormat}}</p>
</div>
</template>
<script>
export default {
data() {
return {
money:3333
}
},
filters: {
moneyFormat(value) {
return '¥' + Number(value).toFixed(2)
}
}
}
</script>
image
- 全局过滤器
Vue.filter('过滤器名称', function (value1[,value2,...] ) {
//逻辑代码
})
在main.js中写全局过滤器
Vue.filter('globalMoneyFormat', function(value) {
return '¥' + Number(value).toFixed(2)
});
组件中代码
<template>
<div>
<h3>过滤器</h3>
<h4>格式化工资</h4>
<p>{{money|globalMoneyFormat}}</p>
</div>
</template>
<script>
export default {
data() {
return {
money:13333
}
}
}
</script>
image
3. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
网友评论