vue-04-自定义过滤器

自定义过滤器分为 全局过滤器 和 组件内部过滤器，具体区别就在于，过滤器配置的位置，以及过滤器的写法

1、全局过滤器，需要在  main.js  内部实现该过滤器  Vue.filter

如下，{{}} 内部存在两个参数，以 | 号分隔，前面的是绑定的参数，后面的则是我们自定义的过滤器，

<template>
    <div id="show-blogs" v-theme:column="'narrow'">
    <h1>博客总览</h1>
    <input type="text"  placeholder="搜索">
    <div  class="single-blog" v-for="blog in blogs">
        <h2 v-texTcolor>{{blog.title | to-upcase}}</h2>
        <article>
            {{blog.body | overflower}}
        </article>
    </div>
  </div>
</template>

Vue.filter 是实现过滤的方法，该方法存在两个参数。

第一个参数，是自定义的过滤器名字，第二个参数，则是一个函数，函数需要一个形参来接收 ，接收的就是定义过滤器时， | 前面绑定的参数，该函数需要return 返回，否则返回值是undefined

//所有标题字体变为大写
Vue.filter('to-upcase' , function(value){
  //  console.log(value)
   return value.toUpperCase()
})


//所有文本内容固定显示多少字,多出来的字显示省略号，只有点击进入详情页才能全部显示
Vue.filter('overflower' , function(value){
  console.log(value)
  return value.slice(0,100) + '...'
})

2、组件内的过滤器

之前讲的是写在  main.js  内的全局的过滤器，但是如果我想在组件内中存在，而不储存到全局，这个时候我们就需要在组件内部进行声明了。

filters 代表的就是过滤器指令，在这里需要加上 s 代表复数

'to-upcase'：就是自定义的过滤器，value就是自定义过滤器前面绑定的需要过滤的值，若是存在多个过滤器，那就直接在下面接着写，但是需要注意的是，这个函数是必须显示的写出 return 的，因为过滤之后我还是需要接受返回值，若是不显示的返回，那就是返回默认的undefined了，而且，value接受的参数，直接使用，不能再前面加上this指向， this.value.toUpperCase()这就是错误的写法

<div  class="single-blog" v-for="blog in scarchBlogs">
   <h2 v-texTcolor>{{blog.title | to-upcase}}</h2>
   <article>{{blog.body | overflower}}</article>
 </div> 


filters: {
    'to-upcase' : function(value){
        return value.toUpperCase()
    },
    'overflower' : function(value){
        return value.slice(0,100) + '...'
    }
}

同时，我们也可以使用es6的简写方式，直接写成方法函数，在这里需要注意的是，如果你的过滤器是使用连字符的，这里要采用驼峰写法，如果是一个单词的，那就直接写

filters: {
    ToUpcase(value){	//toUpcase	也行
        return value.toUpperCase()
    },
    overflower(value){
        return value.slice(0,100) + '...'
    }
},

 ps：推荐使用es6

全局过滤格式化时间，padStart 是es6新增的，头部补全方法，还有一个padEnd，用于尾部补全

// 全局过滤格式化时间
Vue.filter('dataFormat', time => {
  const dt = new Date(time)
  let y = dt.getFullYear()
  let m = (dt.getMonth() + 1 + '').padStart(2, '0')
  let d = (dt.getDay() + '').padStart(2, '0')
  let hh = (dt.getHours() + '').padStart(2, '0')
  let mm = (dt.getMinutes() + '').padStart(2, '0')
  let ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})