[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鏈接已經被替換為

- 起步
- 環境搭建
- mock數據
- 基礎
- 生命周期
- 過濾器
- 過渡動畫
- keyframes動畫
- 動畫JS鉤子
- 路由
- 導航守衛
- 全局守衛
- 監聽器
- 自定義組件
- 獲取焦點
- mixins
- mixins抽離vuex
- 國際化
- 動態組件
- Dom
- 擴展
- 安裝devTools
- scss
- Nuxt引用多個UI庫
- vuex
- vuex命名空間
- vuex定義
- cli
- 安裝與卸載
- 環境變量
- 雜項
- Mock數據
- FeHelper
- git
- 反向代理
- 本地存儲
- stylus
- 常用mixins
- jsonp
- 配置
- mock配置
- 跨域配置
- 自定義路徑
- px2rem
- 代理后端請求
- 常用算法
- 字母排序城市數據
- 倒計時
- 通訊錄數據結構
- 請求
- axios防止多次請求
- 封裝axios請求
- axios使用
- 封裝axios
- 插件
- BetterScroll
- 高德定位
- polyfill
- fastClick
- LazyLoad
- storageCache
- moment
- keyFrameAnimation
- vueSwiper
- 組件
- Loading組件
- header組件
- 仿有道App導航
- SupportIcon
- 仿餓了么購物車跳動
- 購物車小球緩動
- 小球飛入購物車
- 仿音樂歌手列表
- 唱片飛入效果
- 搜索組件
- 仿美團PC搜索框
- 頁面布局
- stickyFooter
- 背景色漸變
- 背景虛化
- Ui組件
- CubeUi
- CreateApi
- tab滑屏切換
- 索引列表
- BScroll
- BScroll左右聯動導航
- vant
- 函數庫
- 常用Dom函數庫
- axios封裝
- 格式化音樂播放時長
- 搜索節流
- time格式化
- JS基礎
- window對象中的高度
- JS中的寬高
- 常用正則
- nuxt
- nuxtVuex
- 監聽頁面滾動
- 監聽body滾動
- 監聽局部滾動