Vue过滤器(filter)

Vue过滤器（filter）

主要用于文本的格式化，或者数组数据的过滤排序等。

用在两个地方：1.{ {}}插值，2.v-bind

{ {message | capitalize}}

<div v-bind:id="rawId" | formatId"></div>

全局过滤器

定义全局过滤器 Vue.filter(“过滤器ID（即名称）”，function(value){

​ 过滤器所实现的功能

​ })

过滤器本质是一个函数：过滤器名=函数名“myfilter”

在插值表达式中，变量即传递给过滤器的参数

<div id="app">
        <input type="text" v-model="message">
        <br><br>
        {
   
   {message | myfilter}}
    </div>
    <script>
        //过滤器本质是一个函数：过滤器名=函数名“myfilter”
        //在插值表达式中，变量即传递给过滤器的参数
        Vue.filter("myfilter",function(value){
     
     
            if(!value){
     
     
                return ""
            }
            value = value.toString();//将value的值转换为字符串
            return value.toUpperCase();
        })
        new Vue({
     
     
            el:"#app",
            data:{
     
     
                message:"Hello World"
            }
        })
    </script>

局部过滤器

    <div id="app">
        <input type="text" v-model="message">
        <br><br>
        {
   
   {message | myfilter}}
    </div>
    <script>
        new Vue({
     
     
            el:"#app",
            data:{
     
     
                message:"Hello"
            },
            filters:{
     
     
                //局部过滤器
                myfilter:function(value){
     
     
                    if(!value) return ""
                    value = value.toString();
                    return value.toLowerCase()
                }
            }
        })
    </script>

过滤器串联

{ {message | filterA | filterB}}

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

{ { message | filterA(‘arg1’, arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。