Vue过滤器

1.什么是过滤器

过滤器的主要作用是对数据的处理，可被用于一些常见的文本格式化

2.过滤器的用法

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 ( v-bind 表达式从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}
{{要过滤的数据 |(管道符号) 过滤器的名字}}

<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>

例如：

<div id="app">
    {{time|demo}}<br>
    {{time|demo('-')}}<br>
    {{time|demo('、')}}<br>
    {{time|demo('/')}}<br>
</div>

• Vue.filter 参数1是过滤器名， 参数二是一个函数
• 函数的第一个参数data就是要过滤的数据

Vue.filter('demo',(data,params='.')=>{
  // 对数据做处理
  let y= (new Date(data)).getFullYear()
  let m= (new Date(data)).getMonth()+1
  let d= (new Date(data)).getDate()
  // 处理数据
  // 返回数据结果
  return  `${y}${params}${m}${params}${d}`
}) 
let vm=new Vue({
  el:"#app",
  data:{
    time:(new Date()).getTime()
  }
})