vue 过滤器 基本用法

• Z时代
• 2024-01-10
• 分类：综合

使用地点：双花括号插值和v-bind表达式。

<div id="app">
    <p>{{ message|capitalize}}</p>
    <div v-bind:id="message|capitalize"></div>
</div>

new Vue({
    el:"#app",
    data:{
        message:"pwd"
    },
    filters:{
        capitalize:function(value){
            return value+\'a\'
        }
    }
})

注意：过滤器函数接收的第一个值是message，依次是传的值。
过滤器是可以叠加的，后面过滤器接收前面过滤器的返回值。

<div id="app">
    <div v-bind:id="message|capitalize(\'a\',\'b\')|gl"></div>
</div>

var app=new Vue({
    el:"#app",
    data:{
        pwd:"pwd"
    },
    filters:{
        capitalize:function(value,x,y){
            return value+x+y;
        },
        gl:function(value){
            value=value.toString();
            return value.toUpperCase();
        }
    }
})

以上是 vue 过滤器 基本用法 的全部内容， 来源链接： utcz.com/z/379221.html