VUE（vue对象的简单属性）

一：全局过滤器和局部过滤器

　　ps：不管是局部过滤器还是全局过滤器，一定都要有renturn 返回
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE的过滤器</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <span>{{num|f2|}}</span>
    <br>
    <span>{{text|trans}}</span>
    <br>
    <span>{{num|f2|f3}}</span>      <!-- 调用多个过滤器 -->
    <br>
    <span>{{text_02|f4 }}</span>
</div>


<script>
    // 不管是局部过滤器还是全局过滤器，一定都要有renturn 返回
    // 01 在全局定义自定义过滤器，这样全局的对象都可以使用
    Vue.filter("f2", function (value) {     //全局过滤器，/ 在Vue对象调用过滤器时过滤的内容
             //过滤器名字  函数（value值），会将对象的值调用到value中，然后进行过滤，再返回给视图
        console.log("f2的过滤器。。。。", value);
        return value.toFixed(2)   // 保留两位小数
    });

    Vue.filter("f3", function (value) {
        console.log("f3的过滤器。。。", value);
        return value + "RMB.."
    });

    Vue.filter("f4", function (value) {
        console.log("f4的过滤器。。。", value);

        //用过滤器进行简单的判断
        if (value < 0) {

            return "数字小于0"
        }
        else {
            return "数字大于0"
        }

    });


    let vm = new Vue({
        el: "#app",
        data: {
            num: 10.33333,
            text: "hello world",
            text_02: 0.2345,
        },

        methods: {},

        // 局部过滤器
        filters: {              //局部过滤器
            trans: function (value) {
                return value.toUpperCase();    //小写字母换成大写
            }
        }
    })

</script>

</body>
</html>
View Code