Vue：filter全局使用

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

文章参考

https://cn.vuejs.org/v2/guide/filters.html