Vue的filters传入多个参数的写法

最新推荐文章于 2024-01-31 15:54:47 发布

原创最新推荐文章于 2024-01-31 15:54:47 发布 · 4.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

Vue.js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了Vue.js中过滤器的使用方法，特别是如何在一个过滤器中传递多个参数，并展示了具体的实现代码示例。

Vue的filters传入多个参数的写法

Filters是Vue的过滤器

//传入一个参数时
<template>
    <div>
        <h1>{{content | filter}}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            content:""
        }
    },
    filters:{
        filter(text){
        	//text就是传过来的参数
            console.log("=>",text);
            return text;
        }
    }
}
</script>

<style scoped>

</style>

//传入两个参数时
<template>
    <div>
        <h1>{{content | filter(value)}}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            content:"内容1",
            value:"内容2"
        }
    },
    filters:{
        filter(text,text2){
        	//text就是传过来的第1个参数,text2就是传过来的第2个参数
            console.log("=>",text,text2);
            return text;
        }
    }
}
</script>

<style scoped>

</style>

//传入多个参数时
<template>
    <div>
        <h1>{{content | filter(value,value2,value3)}}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            content:"内容1",
            value:"内容2",
            value2:"内容3"
            value3:"内容4"
        }
    },
    filters:{
        filter(text,text2,text3,text4){
        	//text就是传过来的第1个参数,text2就是传过来的第2个参数,text3就是传过来的第3个参数,text4传过来的第4个参数
            console.log("=>",text,text2);
            return text;
        }
    }
}
</script>

<style scoped>

</style>