理解:
对要显示的数据进行特定的格式化后再显示,但它并没有改变原数据,只是产生新的对应数据
项目需求,接收到数据为35000,展示数据时显示3.5万
过滤器分为全局和局部,先用局部过滤器,后面再用全局的办法来解决
局部过滤器:用于差值表达式和v-bind
<div id="demo"> {{price | priceFilter}}</div>
<!-- 插值表达式走边:要展示数据 ,右边:局部过滤器的名字 -->
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo' ,
data:{
price:35000
},
filters:{
priceFilter(value){
if (value < 10000) {
return value
} else {
return (value/10000).toFixed(1)+ '万'
}
}
}
})
输出
全局过滤器:Vue.filter(‘firstName’ ,(value)=>{ return 数据处理的结果 })
<div id="demo"> {{price | priceFilter}}</div>
<!-- 插值表达式走边:要展示数据 ,右边:全局过滤器的名字 -->
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
Vue.filter('priceFilter', (value) => {
if (value < 10000) {
return value
} else {
return (value / 10000).toFixed(1) + '万'
}
})
new Vue({
el: '#demo',
data: {
price: 35000
}
})
输出