Vue中过滤器(filter)的使用

源码 点击

1. 局部过滤器

语法

• template

<div>{{ name | capitalize }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>

• script

filters: {
  capitalize: function (value) {
    return value
  }
}

说明

• 过滤器函数中的value,就是 |前面的值，它相当于第一个参数
• 在过滤器函数中一定要返回一个值，他就是我们对格式处理后的结果
• 通俗的来讲，当为一个数据绑定一个过滤器后，每一次渲染这个数据的时候，他都会调用相应过滤器的函数

实战

• 使用vue-cli下载一个默认的项目，我使用vue/cli4默认的目录如下
  

1. 在components文件夹下新建FilterLoc.vue表示局部的过滤器，并写上如下代码，我们的目的是把sunwukong首字母变成大写

<template>
    <div>{{name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'sunwukong'
        }
    },
    filters:{
        //当value改变的时候，他会执行这个函数
        capitalize:function (value) {
            //一定要返回一个值才能在组件中正常显示
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2. 我们在App.vue中引入并映射成组件

<template>
    <div><filter-loc></filter-loc></div>
</template>

<script>
import FilterLoc from '@/components/FilterLoc'
export default {
    components:{
        FilterLoc
    }
}
</script>

3. 运行项目，观察效果，我们发下sunwukong首字母已经大写
   

2. 全局过滤器

语法

Vue.filter('capitalize', function (value) {
  return value
})

• 使用与说明与局部的过滤器差不多
• 定义了全局过滤器我们可以再任何一个地方使用过滤器

实战

1. 我们可以在入口文件定义全局过滤器，当然也可以是其他文件，这里我们把最后一个首字母变成大写

• main.js

/* 定义全局过滤器 */
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  const length = value.length - 1
  value = value.toString()
  return value.slice(0,length) + value.charAt(length).toUpperCase() 
})

2. 在components文件夹下新建FilterGlo.vue表示使用全局过滤器，并写上如下代码，直接使用过滤器

<template>
    <div>{{name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'zhubajie'
        }
    }
}
</script>

3. 我们在App.vue中引入并映射成组件，运行项目观察效果
   

说明
4. 其实刚刚我们定义了两个id相同的过滤器，但是我们发现局部的并没有改变，于是我们就发现了，过滤器的优先级：局部的要比全局的优先级高

3. 串联过滤器

语法

<div>{{ message | filterA | filterB }}</div>

• 后一个过滤器接收的参数为前一个参数的返回值

实战

1. 在components文件夹下新建FilterSer.vue表示使用串联过滤器，并写上如下代码，直接使用全局过滤器(尾字母大写)，和我们自定义的过滤器(首字母大写)

<template>
    <div>{{name|initalWord|capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'shawujing'
        }
    },
    filters:{
        initalWord:function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2. 我们在App.vue中引入并映射成组件，运行项目观察效果，我们发现两个选择器都使用上了
   

4. 过滤器的参数

语法

<div>{{ message | filterA('arg1', arg2) }}</div>

实战

1. 在components文件夹下新建FilterParam.vue表示使用过滤器参数，并写上如下代码，定义了一个过滤器，并传递了参数

<template>
    <div>{{name|paramsFil('白骨精','白龙马')}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'师徒四人'
        }
    },
    filters:{
        paramsFil:function (value,arg1,arg2) {
            console.log(value,arg1,arg2)
            return value + arg1 + arg2
        }
    }
}
</script>

2. 我们在App.vue中引入并映射成组件，运行项目观察效果
   
3. 我们在看看控制台的输出
   

• 通过filterA('arg1', arg2)传入的参数为过滤器的后两个参数