一、Vue中的过滤器是什么

        过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数。

        定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

Vue 允许你自定义过滤器,可被用于一些常见的文本格式化

ps: Vue3中已废弃filter

二、Vue中的过滤器如何用

   vue中的过滤器可以用在两个地方:双花括号插值 v-bind 表达式(:),过滤器应该被添加在 JavaScript表达式的尾部,由“管道”符号指示. 

	使用过滤器:{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

定义filter

在双花括号中:
    {{ message | capitalize }}

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

组件的选项中定义本地的过滤器(局部过滤器

定义全局过滤器: 

 

注意:当全局过滤器和局部过滤器重名时,会采用局部过滤器

         过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,capitalize 过滤器函数将会收到 message 的值作为第一个参数

过滤器可以串联

{{message | filterA | filterB}}

  在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript函数,因此可以接收参数:

{{message | fliterA('arg1',arg2)}}

         这里,filterA 被定义为接收三个参数的过滤器函数。

其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数

小结:

  • 局部过滤器优先于全局过滤器被调用
  • 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
<!-- 
过滤器:
	定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
	语法:
		1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
		2.使用过滤器:{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
	备注:
		1.过滤器也可以接收额外参数、多个过滤器也可以串联
		2.并没有改变原本的数据, 是产生新的对应的数据
-->

三、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 "2022/11/05" + 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')

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐