vue filter（过滤器） 详解

• 过滤器顾名思义就是一个数据格式经过了过滤器后出来另一种数据格式。

• vue中的过滤器分为两种：局部过滤器和全局过滤器

全局过滤器

全局过滤器在 main.js 内直接通过

Vue.filter('过滤器名称',函数)

来定义,它定义好了之后,在所有的组件内都可以使用.

// my-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
  Vue.filter('my-filter',(value,...args)=>{
    //数据处理的过程
    return 数据处理后的结果
  })

var app = new Vue({
    el: '#app',
    data: {
      price:null,
      Value: '原始数据'
    })

<div id='app'>
    <p>{{value | my-filter}}</p>
  </div>

{{ value | my-filter }}

把 v

alue

的值原封不动的传递给 my

-filter

在 my

-filter

方法定义的第一个参数

value

就等于

{{ value | my-filter }}里面的value

局部过滤器

定义在组件内部 filters 属性上.它只能在此组件内部使用.

<div id="app">
    <p>message的值为：{{time | filterTime }}</p>
</div>
<script>
   const vm = new Vue({
        el:"#app",
        data:{
            time: "2022-10-12 10:08:32"
        },
        //局部过滤器注册
        filters:{
            //注意: 过滤器函数形参中的time，永远是前面的那个值
            filterTime(time){
                //对time做一个处理
                let month = item.split(' ')[0].split('-')[1]
                    let day = item.split(' ')[0].split('-')[2]
                    let hour = item.split(' ')[1].split(':')[0]
                    let second = item.split(' ')[1].split(':')[1]
                    return month + '.' + day + ' ' + hour + ":" + second
            }
        }
    }) 
 
// 最后的结果就展示10-12 10:08:32
</script>

注意：全局注册时是

filter

，没有s的。而组件过滤器是

filters

，是有s的，这要注意了，虽然你写的时候没有s

不报错

，但是过滤器是

没有效果

的

局部过滤器的连用方法

<div id="app">
    <p>message的值为：{{time | filterTime | filterTime1}}</p>
</div>
<script>
   const vm = new Vue({
        el:"#app",
        data:{
            time: "2022-10-12 10:08:32"
        },
        //局部过滤器注册
        filters:{
            //注意: 过滤器函数形参中的time，永远是前面的那个值
            filterTime(time){
                //对time做一个处理
                let month = item.split(' ')[0].split('-')[1]
                    let day = item.split(' ')[0].split('-')[2]
                    let hour = item.split(' ')[1].split(':')[0]
                    let second = item.split(' ')[1].split(':')[1]
                    return month + '.' + day + ' ' + hour + ":" + second
            }
            filterTime1(time){
                return time + '加油'
            }
    }) 
 
// 最后的结果就展示10-12 10:08:32加油
</script>

** 过滤器也可携带参数**

{{time | filterTime('加油',学习)}}

<div id="app">
    <p>message的值为：{{time | filterTime('加油',学习)}}</p>
</div>
<script>
   const vm = new Vue({
        el:"#app",
        data:{
            time: "2023"
        },
        //局部过滤器注册
        filters:{
            //注意: 过滤器函数形参中的time，永远是前面的那个值
            filterTime(time,val1,val2){
              return time + val1 + val2
            }
    }) 
 
// 最后的结果就展示2023加油学习

{{time,time1 | filterTime}}

<div id="app">
    <p>message的值为：{{time,time1 | filterTime}}</p>
</div>
<script>
   const vm = new Vue({
        el:"#app",
        data:{
            time: "2023"
            time1: "10"
        },
        //局部过滤器注册
        filters:{
            //注意: filterTime为过滤器名称 
            filterTime(time,time1){
              return time + time1
            }
    }) 
 
// 最后的结果就展示2023-10