Vue中的过滤器（filter）

什么是过滤器？

      顾名思义，过滤器就是就对数据进行筛选、过滤、格式化，比如时间格式化、英文大小写转换、状态转换等等。它与methods、computed 或者 watch不同是，它不能改变原始值。

 

      过滤器分类：

             1、组件内过滤器 

                        组件内过滤器就是通过filters属性，该属性是一个对象，在该对象中可以定义多个过滤器。它的特点是只能作用于本组件内。

              2、全局过滤器

                         全局过滤器是通过在main.js文件创建一个 Vue.filter('过滤器的名称',该过滤器的具体实现函数) 。它的特点是作用于全部组件。

 

      注意事项：

              1、当全局过滤器和组件内过滤器重名的时候，那么最终将会以组件内过滤器为基准。

              2、当出现子父组件时，父组件和全局中分别定义了相同名称的过滤器，这是子组件引用过滤器时，将会使用全局的过滤器

   

 

怎么使用过滤器？

          1、组件内过滤器

<template>
    <div>
      <el-input placeholder="请输入时间戳"
                v-model="date"
                clearable></el-input>
 
      <div >
        时间格式化以后的数据为：{{date | dateFormat}}
      </div>
 
 
      <el-input placeholder="请输入分数"
                v-model="fraction"
                clearable
      style="margin-top: 30px"
      ></el-input>
      <div >
        该分数的评分结果为：{{fraction | fractionFormat}}
      </div>
 
      <div>当前的程序运行{{state | stateFilter}}</div>  
 
    </div>
</template>
 
<script>
  import Moment from 'moment'
export default {
    /*组件内过滤器*/
  filters:{
    /**
     * 日期过滤器
     * @param dateStr 日期字符串
     * @returns {string}
     */
    dateFormat:function (dateStr) {
      return Moment(dateStr).format('YYYY-MM-DD');
    },
 
    /**
     * 分数格式化话过滤器
     * @param fraction 当前的fraction就是  {{fraction | fractionFormat}}  中的fraction
     */
    fractionFormat:function (fraction) {
      let level = '不及格';
      if (fraction<60){
        level = '不及格';
      } else if (fraction>=60&&fraction<80) {
        level = '及格';
      } else if (fraction>=80&&fraction<90) {
        level = '优秀';
      } else if (fraction>=90&&fraction<=100) {
        level = '特别优秀';
      } else {
        level = "您输入的分数有误，请重新输入";
      }
      //返回的就是最终要显示的值
      return level;
    },
    /**
     * 状态过滤器
     * 此过滤器非常适合服务返回给前端状态值，然后前端根据服务器返回的状态值显示不同的文字状态
     * number 表示要过滤的内容
     * 1 表示成功
     * 2 表示失败
     * @param number
     */
    stateFilter(number){
      const stateList = {
        1:"成功",
        2:"失败",
      };
      return stateList[number]
    }
  },
  data(){
    return {
      date:'January 12,2006 22:19:35',
      fraction:"",
      state:"1",
    }
  },
  methods:{
 
 
  }
 
}
</script>
 
<style scoped>
</style>

 

 

2、全局过滤器

在main.js文件中定义

 
 
import Vue from 'vue'
import App from './App'
 
 
 
 
import home from './components/home'
import login from './components/login'
import movie from './components/movie'
import scienceFictionFilm from './components/scienceFictionFilm'
import comedyMovie from './components/comedyMovie'
import splash from './components/splash'
import notFoundVue from './components/notFoundVue'
 
 
 
/*
* 引入Moment时间类库
* */
import Moment from 'moment'//导入文件
Vue.prototype.$moment = Moment;//赋值使用
 
 
 
/*
* 30、moment配合过滤器来完成需求
*全局过滤器
* convertData 表示过滤器的名称
* function (value)  表示具体的实现函数
* */
Vue.filter('dateFormat',function (value) {
  //表示将当前传入的时间格式化为：年-月-日  ，比如：2006-01-12
  return Moment(value).format('YYYY-MM-DD');
})
 
 
 
 
 
 
 
 
 
 
 
/*
 *
 *
 * */
let router = new VueRouter({
 
  linkActiveClass:'mui-active',
  /*
   * routes 当前的KEY是固定的
   * */
  routes:[
 
    /*
     {path:'/home',component:home} 表示配置一条规则
     name:'home'  其中的home是这条规则的名称,可以通过名称来关联这条规则
     path 是固定的，当前的规则必须有锚点值的匹配路径，
     * '/' 表示路径
     * component:home 表示显示的内容，也就是路径下面要显示的内容,当前的home是一个vue文件
     * */
    {name:'home', path:'/home',component:home},
    /*{name:'login', path:'/login',component:login}*/
 
    {name:'login', path:'/login/:id',component:login},
 
 
    {name:'movie', path:'/movie',component:movie},
 
    {name:'scienceFictionFilm', path:'/scienceFictionFilm',component:scienceFictionFilm},
 
    {name:'comedyMovie', path:'/comedyMovie',component:comedyMovie},
 
      /*表示设置重定向，页面初始直接进入到规则名称为splash的页面，也就是进入到splash页面*/
    {path:'/',redirect:{name:'splash'}},
    {name:'splash', path:'/splash',component:splash},
 
 
    /*404页面
    * */
    {path:'*',component:notFoundVue},
 
 
 
  ]
 
 
})
 
 
 
 
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  /*
  * 
  * router:router, 通过ES6可以将其简写为  router,
  * */
  router,
  store,
  components: { App },
  template: '<App/>'
})
 

 在组件中使用

<template>
    <div>
      <el-input placeholder="请输入时间戳"
                v-model="date"
                clearable></el-input>
 
      <div >
        时间格式化以后的数据为：{{date | dateFormat}}
     </div>
    </div>
</template>
 
<script>
export default {
  data(){
    return {
      date:'January 12,2006 22:19:35',
    }
  },
  methods:{
  }
 
}
</script>
 
<style scoped>
</style>