我们渲染到页面上的数据通常是来自数据库，而数据库存储的数据往往是我们难以预测的，为了避免超出我们意料之外的数据格式，我们要进行过滤处理。

• tip：2020年9月份，vue3出来了。增加了很多新功能，但是也删掉了一些功能。比如删掉了vue2中的过滤器filter功能。与此同时，官方建议：用方法调用或计算属性替换过滤器。

filters过滤器

过滤器用于处理接受的数据，在过滤器中无法使用this指向当前vue实例。

过滤器使用

过滤器顾名思义，过滤掉不需要的数据，并不是不要数据，而是进行处理，通常是裁剪。

基本格式： {{变量|处理变量的函数，该函数来自filters对象}}

    <div id="app" v-cloak>
        <div>{{num|showNum}}</div>
    </div>

......
            data:{
                num:123.231
            },
            filters:{
                showNum(num){
                    return num.toFixed(1)
                }
            }
......

——v-指令中使用过滤器

我们除了在插值表达式中使用过滤器，我们还可以在v-指令中使用过滤器。

<input type="text" :value="num|showNum" id="">
{{num}}

注意要是在使用了v-指令或属性上使用过滤器。

多值过滤器

通过 | 前面的变量作为过滤器的参数，我还可以添加更多的参数。通过下面的格式：

<div>{{string|showString('开头大写：')}}</div>

多值情况下，还是默认一个接受参数为|前的变量，而通过()传入的实参则是赋值给了后续的参数，并且可以传入多个参数进行函数设计。

......
            filters:{
......
                showString(str1,str2){
                    //str1就是string
                    return str2 + str1.replace(/^[^]/,($)=>$.toUpperCase())
                }
            }
......

嵌套过滤器

如果v-for一样，我们使用过滤器也可以嵌套，因为我可以把原插值表达式看作一个整体变量。

        <div>{{speed|moreSpeed|moreSpeed}}</div>
        {{speed}}

......
moreSpeed(speed){
    return speed*2
}
......

---

正如一开头所说我们的过滤器本身不再被vue3所保留，所以我建议大家仅仅是作为学习目的进行学习，减少在项目中的使用，为日后vue2转vue3的平滑打预防针。