过滤器filters(私有方式应用)filter(全局方式应用)

过滤器的使用

一般用来 实现对象时间转换为格式化时间

声明私有过滤器语法：

Vue实例化过程中，与el、data平行的位置声明filters成员并在其中制作过滤器，这个过滤器只能被当前Vue实例使用，称为 "私有过滤器"

new Vue({
  filters:{
    // 如下方法格式是es6简易设置方式，完整写法： 过滤器名称:function(被处理数据){]}
    过滤器名称(被处理的数据){
      // 对数据进行加工处理
      return 结果
    },
data:{

  }
    ...
  }
})

使用：

{{ 时间信息成员 | 过滤器名称 }}

| 过滤器被设置到应用数据的尾部，通过 “|竖线” 连接

注意：
过滤器只可以用在两个地方： 插值表达式和 :冒号 属性绑定表达式。
| 1) 插值表达式： {{ 数据 | 过滤器 }}
| 2) v-bind属性绑定中使用： <标签 :属性=“数据 | 过滤器">
| v-if="city|xx" 错误

dome:

image.png

html:
<td>{{ item.ctime | timeFMT }}</td>

// 注册过滤器【私有的】
filters:{
  // 语法：
  // 过滤器名称:function(被处理的目标数据){}
  // timeFMT:function(){
  timeFMT(origin){
    // console.log(origin)
    // 根据origin重新实例化一个时间对象
    // var tm = new Date(对象/时间戳)
    var tm = new Date(origin)
    // 分别获得年、月、日、时、分、秒，并做拼接即可
    var yyyy = tm.getFullYear()
    var mm = (tm.getMonth()+1).toString().padStart(2,0)
    var dd = tm.getDate().toString().padStart(2,0)

    var hh = tm.getHours().toString().padStart(2,0)
    var ii = tm.getMinutes().toString().padStart(2,0)
    var ss = tm.getSeconds().toString().padStart(2,0)

    return `${yyyy}-${mm}-${dd} ${hh}:${ii}:${ss}`

    // 把时间数据从 对象 格式转变为 格式化 样子
    // 注意：需要return返回转换好的结果
    // return '2019-12-29 11:30:57'
  }
},

image.png

全局方式应用

在new Vue()前边，直接给Vue调用filter声明的过滤器称为“全局过滤器”
全局的意思是过滤器可以供所有Vue实例使用

Vue.filter(名称, function(被处理的数据){})
var vm = new Vue()
var vm2 = new Vue()

注意：
全局的过滤器需要在new Vue()之前声明

应用：
声明一个全局过滤器，可以给多个Vue实例应用

html
 <div id="app">
    <p>{{ city }}</p>
    <p>{{ city | qian }}</p>
    <p>{{ city | hou }}</p>
    <p>{{ city | qian | hou }}</p>
  </div>
  <hr />
  <div id="app2">
    <p>{{ address }}</p>
    <p>{{ address | qian}}</p>
    <p>{{ address | hou}}</p>
  </div>

 <script>
    // 全局过滤器，所有的Vue实例都可以使用
    // 注意：需要在new Vue()前边设置
    // Vue.filter(名称,function(被处理数据){return xx})
    Vue.filter('hou',function(origin){
      return origin+',很冷'
    })

    var vm = new Vue({
      el:'#app',
      // 私有过滤器，只是当前"自己Vue实例"可以使用
      filters:{
        qian(origin){
          return '我喜欢'+origin
        }
      },
      data:{
        city:'北京'
      },
    });

    var vm2 = new Vue({
      el:'#app2',
      data:{
        address:'上海'
      }
    })
  </script>