vue 过滤器基本使用

作者: ropon 分类: Vue 发布时间: 2019-01-04 14:58
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="app">
    <App></App>
</div>

<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script>
<script src="https://mirrors.idiyrom.com/web/js/moment.min.js"></script>
<script>
    //定义全局过滤器
    Vue.filter("myTime2", function (val, formatStr) {
        return moment(val).format(formatStr);
    });


    let App = {
        data() {
            return {
                msg: "hello world",
                time: new Date(),
            }
        },
        template: `
            <div>
                我是一个APP {{ msg | myReverse }}
                <h2>{{ time | myTime2("YYYY-MM-DD") }}</h2>

            </div>`,
        //定义局部过滤器
        filters: {
            myReverse: function (val) {
                return val.split("").reverse().join("");
            },
            myTime: function (val, formatStr) {
                return moment(val).format(formatStr);
            }
        }
    };

    let vm = new Vue({
        el: "#app",
        data() {
            return {

            }
        },
        components: {
            App,
        }
    });
</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!