master

分支 (1)

管理

管理

master

learn-vue
/
demo_013.html

<!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="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app" >
        {{msg|foo|bar('orange')}}
    </div>

    <div id="app2">
        <!-- foo是第一个Vue实例的私有过滤器，第二个Vue实例是无法使用的 -->
        {{msg|foo}}
    </div>

    <script>

        // 第一个Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                msg:"无崖子"
            },
            filters: {
                "foo": function(data) {
                    return data + " " +new Date().getTime();
                },
                "bar": function(data, color) {
                    return "<font color='"+color+"'>" + data + "</font>";
                }
            }
        });

        // 第二个Vue实例
        var app2 = new Vue({
            el: "#app2",
            data: {
                msg: "丁春秋"
            }
        });
    </script>
</body>
</html>