【vue】filter过滤器的用法

前言

过滤器filter经常被用在文本的格式化。比如时间戳的转化，价格符号的添加（￥），分为局部过滤器和全局过滤器。

种类

一、局部过滤器

写在组件内部，供该组件使用

1.定义单个过滤器afterprice，给价格添加符号

       <ul>
		   <li v-for="item,index in list">
			   <span>{{item.name}}：</span>
			   <span>{{item.price|afterprice(item.price)}}</span>
		   </li>
	   </ul>

  data(){
	  return{
		  list:[
			  { name:'oppo reno1',price:2999},
			  { name:'oppo reno2',price:3999},
			  { name:'oppo reno3',price:4999}
		  ]
	  }
  },
  filters:{
	  afterprice(item){
		  return '￥'+item
	  }
  }

结果：

注意：

调用过滤器时可以不用传入数据，默认第一个参数即为该数据。即<span>{{item.price|afterprice}}</span>，这种写法默认将item.price传入过滤器

2.定义多个过滤器，第一个过滤器afterpriceA将数据执行加1的操作，并将结果传入第二个过滤器afterpriceB，afterpriceB执行添加符号￥将结果输出页面

       <ul>
		   <li v-for="item,index in list">
			   <span>{{item.name}}：</span>
			   <span>{{item.price|afterpriceA(1)|afterpriceB}}</span>
		   </li>
	   </ul>

  data(){
	  return{
		  list:[
			  { name:'oppo reno1',price:2999},
			  { name:'oppo reno2',price:3999},
			  { name:'oppo reno3',price:4999}
		  ]
	  }
  },
  filters:{
	  afterpriceA(item,x){
		  return item+x
	  },
	  afterpriceB(item){
		  return '￥'+item
	  }
  }

结果：

注意：

afterpriceA(1)默认第一个参数为前面的数据，省略不写。1为第二个参数

二、全局过滤器

可以将全局过滤器写在main.js，为了方便管理写在单独文件filter.js，然后在main.js引入。

1.创建filter.js文件，写过滤器

const afterpriceA = function(val){
	return '￥'+val
}
const afterpriceB = function(val,add){
	return '￥'+(val+add)
}
const afterpriceC = function(val,red){
	return '￥'+(val-red)
}

export default{
	afterpriceA,
	afterpriceB,
	afterpriceC
}

2.在main.js引入

import  filter from './filters/filter.js'

//循环注册
Object.keys(filter).forEach(key => {
  Vue.filter(key,filter[key])
})

3.组件使用

       <ul>
		   <li v-for="item,index in list">
			   <span>{{item.name}}：</span>
			   <span>{{item.price| afterpriceA}}</span>
		   </li>	   
	   </ul>
	   <ul>
	   		   <li v-for="item,index in list">
	   			   <span>{{item.name}}：</span>
	   			   <span>{{item.price| afterpriceB(1)}}</span>
	   		   </li>	   
	   </ul>
	   <ul>
	   		   <li v-for="item,index in list">
	   			   <span>{{item.name}}：</span>
	   			   <span>{{item.price| afterpriceC(999)}}</span>
	   		   </li>	   
	   </ul>

结果：