filter过滤器

filter过滤器

• filter主要用于数据展示之前的处理
• 只能用在v-bind或者插值表达式中
• 可以调用多个函数 也可以传递多个参数

 <div id="eg1">
        <p>{{timeformat(birth)}}--调methods方法，在this上</p>
        <p>{{birth|tool|tool2}}--调filter过滤器:( 参数|函数)，不在this上</p>
        <p>{{birth|tool3(100,200)}}--多种传参</p>
    </div>
    <script>
        new Vue({
            el: "#eg1",
            data: {
                birth: "2001-05-08",
            },
            //在this上
            methods: {
                timeformat(str) {
                    let age = new Date().getFullYear() - new Date(str).getFullYear()
                    return age + "岁"
                },
            },
            //不在this上
            filters: {
                tool(str) {
                    let age = new Date().getFullYear() - new Date(str).getFullYear()
                    return age + "岁"
                },
                tool2(str) {
                    if(parseInt(str)>18)
                    return "已经成年了"
                },
                tool3(arg1,arg2,arg3) {
                  console.log(arg1,arg2,arg3)
                  return arg1
                }
            }
        })
    </script>

图片