[TOC] #### Vue 局部过滤器  过滤 tag 对象中的key ~~~ <div class="card" > <div v-for="(value, key) in list.tag" :key="key" :class="key|setKey" v-if="value===1" >{{ key | formatValue}}</div> </div> ~~~ ~~~ filters: { formatValue(key) { const arr = [ {key: 'allowRefund', value: '折扣卡'}, {key: 'buyout', value: '贵宾卡'}, {key: 'cityCardTag', value: '蟒蛇卡'}, {key: 'deal', value: '七夕卡'}, {key: 'endorse', value: '单身卡'}, {key: 'sell', value: '情人卡'}, {key: 'snack', value: '帅哥卡'} ] for (let i=0; i<arr.length; i++) { if (arr[i].key === key) { return arr[i].value } } return '' }, setKey(key) { const arr = [ {key: 'allowRefund', value: 'or'}, {key: 'buyout', value: 'bl'}, {key: 'cityCardTag', value: 'or'}, {key: 'deal', value: 'or'}, {key: 'endorse', value: 'bl'}, {key: 'sell', value: 'bl'}, {key: 'snack', value: 'or'} ] for (let i=0; i<arr.length; i++) { if (arr[i].key === key) { return arr[i].value } } return null; } } ~~~ ***** #### Vue 全局过滤器的使用 某些场景，后端传递的Api接口，可以允许你自定义图片宽高，如下图  那么，这时候Vue的过滤器就很实用了，我们定义一个全局过滤器，在Vue实例之前定义 ~~~ import Vue from 'vue' import './plugins/axios' import App from './App.vue' import router from './router' import Axios from 'axios'; // import store from './store' Vue.prototype.$http = Axios Vue.config.productionTip = false Vue.filter('FilterImg',function(url, value) { return url.replace(/w\.h/, value) }) new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ ***** 重点分析这段代码 ``` Vue.filter('FilterImg',function(url, value) { return url.replace(/w\.h/, value) }) ``` url 系统会自动获取当前使用过滤的url value 传入要过滤的参数 url.replace(/w\.h/, value) 将 url 中 `w.h` 部分替换为value ***** 组件中使用 ~~~ <div class="pic_show"> <img :src="item.img | FilterImg('128.180')"> </div> ~~~ 可以看到，当前图片的url链接已经被替换为