第四十三篇 filter - 过滤器_filter.substring-CSDN博客

本文链接：https://blog.csdn.net/weixin_52203618/article/details/127963943

在前面讲过过滤做这个模糊查询，可以回顾一下之前的一个小例子：

<script>
    var arr = [ 1, 2, 3 , 4, 5, 6 ]; //原始数据
    var newArr =  []; //过滤之后的数组
    newArr = arr.filter(item=>item>3){
        //输出过滤之后的数组
        console.log("newArr",this.newArr);
    }
</script>

显然上面的这种方法能将 item>3 的数字过滤出来，但是它没有办法做到复用，在下一次使用需要过滤出item>3的内容是不是需要重新编写 filter( item=>item>3 )，假设现在要显示用户名称，但每一个用户名的命名有的是大小写不统一的，现在要将用户名的首字母进行一个大写，其他的字母小写的显示出来，好像完成并不难，但如何可以做成可复用的呢？就是过滤器了！

Vue.filter

那么在前面讲到这个computed计算属性的时候讲过，如果来进行使用计算属性的话会好用的多，而且每次更新data中的数据，对应依赖它的值也会得到更新：

<div id="app">{{toText}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            myname:'syan123'
        },
        computed:{
            toText(){
                return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
            }
        }
    })
</script>

这样一来使用computed计算属性，能达成效果要的效果，但如果我在定义另外一个岂不是还得复制一份新的computed；下面来通过 Vue.filter 定义一个过滤器：

<div id="app">
    <p>{{myname}}</p> 
    <p>{{myname | toText}}</p> 
    <p>{{her | toText}}</p>
</div>
<script>
    Vue.filter("toText",(item)=>{
        return item.substring(0,1).toUpperCase()+item.substring(1)
    })
    new Vue({
        el:'#app',
        data:{
            myname:'syan123',
            her:'sylim'
        }
    })
</script>

data中数据通过这个管道符 " | " 的形式将它给到filter过滤器 —— toText ，既然可以通过这个管道符的方式给到filter过滤器，那么现在我再通过管道符再进入下一个过滤器给它只显示前三个字母进行进行大写其他不显示可不可以？显然是可以的；

...
    <p>{{her | toText | toUp}}</p>
    <p>{{her | toText | toUp}}</p>
</div>
<script>
    Vue.filter("toText",(item)=>{
        return item.substring(0,1).toUpperCase()+item.substring(1)
    })
    Vue.filter("toUp",(item)=>{
        return item.substring(0,3).toUpperCase()
    })
...