vue中定义过滤器filter

1、在普通项目中进行定义使用

定义：

（1）在Vue实例的filters方法上定义：

let vue=new Vue({
		el:'#box',
		data:{
			inputData:''
		},
		filters:{
			filterData(data){
				return Math.abs(data)
			}
		}
	})

（2）使用Vue的filter方法进行定义(注意必须定义在vue实例化之前，否则使用时会产生报错)

Vue.filter('addOne',(num)=>{
		return parseFloat(num)+1
	})
let vue=new Vue({
		el:'#box',
		data:{
			inputData:''
		},
		filters:{
			filterData(data){
				return Math.abs(data)
			}
		}
})

使用

（1）在属性上进行使用,使用$options.filter.addOne()的方式

<span v-html="$options.filters.addOne(inputData)"></span>

（2）直接使用

<span>{{inputData|addOne}}</span>
 <!--针对标签的属性-->
<div v-bind:id="inputData|addOne"></div>

2、在vue-cli项目中定义使用

定义

（1）局部定义

export default {
    name: "recom-list",
    data(){
      return {
        recomList:[]
      }
    },
    components: {
      blockTitle,
      goodList
    },
    filters:{
      addOne(data){
        return parseFloat(data)+1
      }
    }
}

（2）全局定义

Vue.filter('addOne', (data) => {
  const _data = data.filter((item, index) => {
    return parseFloat(data)+1
});

如果定义的全局filter较多，可以创建一个filters.js文件，存放所有的全局filter

const filters = {
  getEvenList(data) {
    const _data = data.filter((item, index) => {
      if (index % 2) {
        return item
      }
    });
    return _data
  }
};
export default filters

然后在main.js中将filter遍历调用Vue的filter方法添加到全局：

import filters from './filters'

for(let i in filters){
  Vue.filter(i,filters[i]);
}

使用

使用方式与普通项目的使用方式一致

3、总结

filter被设计出来的目的，主要是用来处理文本格式化等操作，因此在vue的一些指令上使用filter就显得有些臃肿，需要调用**$options.filters.**进行调用，在这里可以定义一个方法来替代filter；