Vue之过滤器的使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        /* 过滤器的使用：为了将数据做一些处理后才渲染出来，
        它可以用在组件的内部为该组件服务，也可以声明为全局的过滤器
        下面来看下组件里面过滤器的用法:首先在组件里定义后过滤器的方法，
        然后在使用时使用：要过滤的value | 过滤器名 即可。
        */

        var App = {
            template: `<div>我是局部组件～
            <p>我是使用过滤器后的时间： {{ time | myTimeFilter}}</p>
            </div>`,
            data(){
                return {
                    time: '2019-06-25'
                }
            },
            // 声明过滤器
            filters: {
                // 过滤器将日期中的-替换为/
                myTimeFilter(value) {
                    return value.replace(/-/g, '/');
                }
            }
        };
      
        new Vue({
            el: '#app',
            // 使用局部组件
            template: `
                <App />
            `,
            data:function(){
                return {}
            },
            // 挂载局部组件
            components: {
                App
            }
        });
    </script>
</body>
</html>
posted @ 2019-06-25 14:11  云--澈  阅读(193)  评论(0)  编辑  收藏  举报