Vue filter filters

Mainly used for processing filters before data display can only be used in v-bind or interpolation expressions , and write functions in filters.

For example

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

Obviously, it can be seen that the effect of the two is the same, but the writing method is different

 

Guess you like

Origin blog.csdn.net/m0_63470734/article/details/126630427