在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化。(也就是修饰文本,但是文本内容不会改变)
补充:
过滤器分全局过滤器和局部过滤器,下边我着重说下全局过滤器,因为全局过滤器在项目中使用频率非常高!
局部过滤器:
过滤器可以用在两个地方:双花括号插值 或 v-bind表达式。
eg:先来看看第一个小例子:
<div id="app">
<p>电脑价格:{{price | addPriceIcon}}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
//处理函数
addPriceIcon(value){
console.log(value)//200
return '¥' + value
}
}
})
</script>
上边代码,我的需求是想把价格前面加上人民币符号(¥),模板中文本后边需要添加管道符号( | )作为分隔,管道符 | 后边是文本的处理函数,处理函数的第一个参数是:管道符前边的——文本内容,如果处理函数上边传递参数,则从第二个参数依次往后是传递的参数。可能有人会问:你手动加上去不就得了!如果页面有上千个价格需要添加,怎么办?几十个页面需要添加怎么办呢,手动加能累晕!所以这种通用机制很重要。
在看一个类似官方文档的例子:(把输入的英文首字母大写,如果连续输入,以空格隔开)
<div id="app">
//输入框
<input type="text" v-model="content" @change="changeEvent">
//显示层,后边加一个过滤器处理函数,把英文首字母变为大写
<h3>{{viewContent | changeCapitalLetter}}</h3>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
viewContent:"",
content:""
},
methods:{
changeEvent(){
this.viewContent = this.content;
}
},
filters:{
changeCapitalLetter(value){//value是输入框的内容,也是要显示的内容
if(value){
let str = value.toString();
//获取英文,以空格分组把字符串转为数组,遍历每一项,第一项转为大写字母
let newArr = str.split(" ").map(ele=>{
return ele.charAt(0).toUpperCase() + ele.slice(1)
});
return newArr.join(" ") //数组转字符串 以空格输出。。。
}
}
}
})
</script>
显示:(首字母变为大写!)
***全局过滤器***:(!!!!重点!!!!)
全局过滤器使用:Vue.filter( filterName,( )=>{ return // 数据处理结果 } )
<div id="app">
<h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
Vue.filter("addNamePrefix",(value)=>{
return "my name is" + value
})
let vm = new Vue({
el:"#app",
data:{
viewContent:"吕星辰"
}
})
</script>
上边代码,全局过滤器,
参数一:是过滤器的名字,也就是管道符后边的处理函数;
参数二:处理函数,处理函数的参数同上。。。
(补充)在实际开发中,全局过滤器经常会被在数据(比如时间、日期的装饰)上边,通常我们会把处理函数给抽离出去,统一放在一个.js文件中,下边用代码说下
//filter.js 文件
let filter_price = function (val,...params){
return "¥" + val
}
let filter_date = function (){
return "2019/10/20" + val
}
export {filter_price,filter_date} //导出过滤函数
下边在main.js中 导入 上边 filter.js文件 ,当然你也可以在任何组件中导入 filter.js这个文件,但是对于全局过滤器来说,最好是在main.js中定义,规范些,导入的是一个对象,所以使用Object.keys()方法,得到一个由key组成的数组,遍历数据,让key作为全局过滤器的名字,后边的是key对应的处理函数,这样在任何一个组件中都可以使用全局过滤器了:
//main.js
//下边是2种导入方式,推荐第一种
import * as _filter from './filters/filter'
// import {filter_price,filter_date} from './filters/filter'
console.log(_filter)
Object.keys(_filter).forEach(item=>{
Vue.filter(item,_filter[item])
})
new Vue({
router,store,
render: h => h(App),
}).$mount('#app')
在news.vue组件中使用 全局过滤器:
<template>
<div>
<h1>{{price | filter_price}}</h1>
</div>
</template>
<script>
export default {
name:'news',
data(){
return{
price:1200
}
}
}
</script>
通过全局过滤器讲一个别的小知识点:当我们引用vue框架时,vue会被自动添加到window全局对象上边,而Vue正是一个构造函数,里边定义的是一些静态方法和静态属性,我们知道在ES6类中有静态方法,只有类可以调用!这样也就不难理解了,filter全局过滤器可以被Vue所调用,因为它是一个静态方法。
console.log(window);