【前端】Vue---过滤器filters详解

一、认识过滤器: 格式化数据的一个工具

• 过滤器的作用:用于文本格式化,仅仅作为格式化操作,不做复杂的业务处理
• 过滤器的使用方式:通过管道符号(|)来使用
• 过滤器的使用位置:mustache插值和v-bing的表达式
  

二、过滤器的使用

//如何使用使用过滤器？
      我们用一个叫做管道符的来使用过滤器

      举例： 
          数据 | 过滤器名称
          
fillters:{
    
    过滤器名字( value ){ //参数是被过滤的数据
        
        return 数据; //return的是什么，那么最终显示的就是什么
    }
}

三、过滤器的声明形式:

//过滤器一样也有两种声明形式

    //全局声明(写在main.js中)
    
      Vue.filter(过滤器名称，回调函数)  回调函数中有一个参数value
      value值就表示的是格式化数据的值

    //局部声明
      new Vue({
        filters: {
          '过滤器名称'： function( value ){
            return
          }
        }
      })

四、实例:过滤器结合moment.js插件使用

//局部声明使用
//模板
<template>{{time |fullTime}}</template>

//导入moment.js
import moment from 'moment'
export default {
  name:'goods',
  data() {
    return {
    time:1514865808,
  },
  filters:{
    fullTime(val){
      return moment(val).format("YYYY-MM-DD hh:mm:ss ");
    }
  },
//fullTime最后展示结果:1970-01-18 08:47:45