自定义过滤器分为 全局过滤器 和 组件内部过滤器,具体区别就在于,过滤器配置的位置,以及过滤器的写法
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}`
})