Vue filter (filter)

Vue filter (filter)

Mainly used for text formatting, or filtering and sorting of array data, etc.

Used in two places: 1.{ {}} interpolation, 2.v-bind

{ {message | capitalize}}

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

Global filter

Define the global filter Vue. filter ("filter ID (name)", function(value){

​ The function of the filter

​ })

The essence of a filter is a function: filter name = function name "myfilter"

In the interpolation expression, the variable is the parameter passed to the filter

<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>

Local filter

    <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>

Filter series

{ {message | filterA | filterB}}

In this example, filterAit is defined as a single argument and the filter function, expression messagevalues to be passed as arguments. Then continue the same call is defined as a single argument and the filter function filterB, and filterAthe result is transmitted to filterBthe.

{ {message | filterA ('arg1', arg2)}}

Here, it filterAis defined as a filter function that receives three parameters. Wherein messagethe first parameter value as an ordinary character string 'arg1'as the second parameter, the expression arg2value as the third parameter.