Vue过滤器 filters

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

-不要说话-

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

阅读量226

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63470734/article/details/126630427

版权

Vue 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

本文探讨了Vue.js中如何在模板中使用v-bind和插值表达式调用filter函数，以及如何将自定义过滤器定义在filters对象中。通过实例说明了两者在年龄计算上的等效性，重点在于理解其适用场景和语法差异。

摘要由CSDN通过智能技术生成

主要用于数据展示之前的处理过滤器只能用在v-bind或者插值表达式中，将函数写在filters里面。

例如

 <div class="app">
        <div v-for="el in arr" :class="classname">
            <h1>这是用的方法：{{age1(el.birth,1,2)}}</h1>
<!-- //注意多余的形参写法 -->
            <h2>这是用的过滤器{{el.birth|age2(1,2)}}</h2> 

    </div>

 new Vue({
            el:".app",
            data:{
                classname:"dd",
                arr:[
                    {id:1,like:"小狮子",name:"Bob",birth:"2002-07-30"},
                    {id:2,like:"大绵羊",name:"Mike",birth:"2001-10-20"},
                    {id:3,like:"中飞猪",name:"Steven",birth:"2007-02-03"}
                ]
            },
            methods: {
                age1(str,arg1,arg2){
						let age=new Date().getFullYear()-new Date(str).getFullYear()
						return age+"岁"+arg1+arg2
                }
            },
            filters:{
                age2(str,arg1,arg2){
						let age=new Date().getFullYear()-new Date(str).getFullYear()
						return age+"岁"+arg1+arg2
                }
            }
        })

很明显能看出两者的效果一样，但写法不同