filter过滤器图片 (filter过滤器工作原理)

src->filters->index.js

//index.js
// 根据传入的参数进行处理,return返回处理后的数据,支持多个参数
export function getType(type) {
    switch (type) {
        case 1:
            return "测试1"
            break;
        case 2:
            return "测试2"
            break;
        default:
            return "测试3"
    }
}

main.js里注册filter

import * as filters from './filters' 
Object.keys(filters).forEach(key => {
	Vue.filter(key, filters[key])
})

使用

<!-- 在双花括号中 -->
{{ type |  getType }}
<!-- 在 `v-bind` 中 -->
<div v-bind:type="type | getType"></div>
<!-- 多个参数 -->
{{ type |  getType() }}

局部

filters:{
    comtFilter:function(value){
         return value + "!!!"
    }
  },

全局注册filter,不要加s 即filters

串联使用

{{ msg | filterA | filterB }}

filterB过滤filterA之后的值