vue如何自定义一个过滤器

Posted 2021-06-09 是小橙鸭丶

通过vue实例的 filters 属性或 Vue.filter() 函数创建过滤器，在值运算中用竖杠 | 表示过滤：

过滤器（价格）

<script>
<ul class="brands">
	<li v-for="item in brandList" :key="item.id"  @click="goBrand(item)">
		<img :src="item.pic_url" alt="">
		<h4>{{item.name}}</h4>
		<div>{{item.floor_price | filterMoney}}</div>
		
	</li>
</ul>
</script>

局部过滤器：

<Script>
var vm=new Vue({
    el:"#app",
    data:{
        
    },
    filters: {
      filterMoney: function (value) {
        let newVal = Number(val);
		return '￥ ' + newVal.toFixed(2) + '  元'
      }
    }
})

</script>

全局过滤器：

<script>
// 全局过滤器
Vue.filter('filterMoney',function(val){
	let newVal = Number(val);
	return '￥ ' + newVal.toFixed(2) + '  元'
})
</script>