Vue过滤器 filters

主要用于数据展示之前的处理过滤器只能用在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
                }
            }
        })

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

猜你喜欢

转载自blog.csdn.net/m0_63470734/article/details/126630427
今日推荐