<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{money}}</h1>
        <h1>{{getPrice()}}</h1>
        <!-- 这样就是price的过滤器写法 -->
        <!-- 在VUE3中,过滤器被舍弃了 -->
        <!-- 返回值还可以走一遍filter,再次实现过滤 -->
        <!-- 第一个位置不用写,会自动传递 -->
        <!-- 过滤器只能用在两个位置,一个是插值语法,一个是v-bind中 -->
        <h1>{{price | filterA() | filterB(3)}}</h1>
        <!-- v-bind也可以使用 -->
        <input type="text" :value="price | filterA() | filterB(3)"/>
        <!-- v-model是不能用过滤器的 -->
    </div>
    <div id="app1">
        <h1>{{price1 | filterA() | filterB(3)}}</h1>
    </div>
    <script>
        // 配置全局过滤器
        Vue.filter("filterA",function(val){
            if(val === undefined || val === null || val === '')
            {
                return '-';
            }
            return val;
        });
        Vue.filter("filterB",function(val,number){
            // 确保传过来的数据保留两位小数
            return val.toFixed(number);
        });
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                price : 50.6
            },
            methods : {
                getPrice()
                {
                    if(this.price === undefined || this.price === null || this.price === '')
                    {
                        return '-';
                    }
                    return this.price;
                }
            },
            computed : {
                money()
                {
                    if(this.price === undefined || this.price === null || this.price === '')
                    {
                        return '-';
                    }
                    else
                    {
                        return this.price;
                    }
                }
            },
            // 过滤器可以接受value的数据,我们可以在这里进行格式化,而这里因为没有this
            // 就可以和业务代码剥离开了,耦合度更低了,复用性更强了
            filters : {
                // 局部过滤器
                // filterA(val){
                //     if(val === undefined || val === null || val === '')
                //     {
                //         return '-';
                //     }
                //     return val;
                // },
                // filterB(val,number){
                //     // 确保传过来的数据保留两位小数
                //     return val.toFixed(number);
                // }
            }
        });
        const vm1 = new Vue({
            el : "#app1",
            data : {
                price1 : 23
            }
        });
    </script>
</body>
</html>