filter簡介
Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部
使用
因爲現在很少有人用導入js文件的方式去開發項目了，所以默認是使用全局開發的比較多，所以接下來的講解就以全局開發爲例子
1.創建一個filter文件夾，用於放置filter的
const filters = {
formateTime: function (datetime) {
// eslint-disable-next-line no-console
console.log(datetime);
datetime += 1;
return datetime;
}
}
export default (vm) => {
Object.keys(filters).forEach(key => {
vm.filter(key, filters[key])
})
}
上面的代碼做了兩個事情，第一個，我們定義了一個filters對象，可以看出，他跟官方給出的例子
有很大的相似度，所以他就是我們定義的過濾器了，接下來，要做的是把他放置在全局裏面，所以我們需要下面這種形式
從這個例子可以看出，Vue.filter的時候，我們能做的是filter一個，而不是一個‘列表’，（踩過坑），所以我們需要給我們定義的filters做一個遍歷，然後把每一項都放上去，這樣就能保證是對的，而將這一段的代碼放置在main.js上還是不太合適，畢竟跟別的代碼合在一起，可能就有點繁瑣了，所以就修改爲在我們的filter/index.js中，而直接導入一個Vue就可以了
2.在mian.js中導入
/* eslint-disable no-console */
import Vue from 'vue'
import App from './App.vue'
import util from './util.js'
import router from '@/router'
import store from '@/store'
import filters from '@/filter'
Vue.config.productionTip = false
filters(Vue);//使用filter
Vue.prototype.util = util
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
這兒做的事情比較簡單，將我們實例化的Vue導入去，這樣就實現我們之前說的，Vue對象的綁定
3.在頁面使用它
<template>
<div>
<span>{{datetime|formateTime}}</span>
</div>
</template>
<script>
export default {
data() {
return {
datetime: "2019-01-01"
};
},
created() {}
};
</script>
<style scoped>
</style>
這一塊沒啥難度，就直接寫上去了，類似下方的用法
最後的效果是這樣的
總結
並沒有太過於複雜的用法，主要是三點。
1.定義一個filter
2.將filter綁定到vue實例上，
3.在頁面使用{{a|b}}去使用filter