2019-07-03vue之过滤器的使用

作者: 果冻_4c9b | 来源:发表于2019-07-03 15:00 被阅读0次

2019-07-03vue之过滤器的使用
JavaWeb三大组件之过滤器(Filter)
vue之过滤器(filters)的使用
zuul之请求处理流程
zuul之动态过滤器Filter类文件管理加载
zuul之过滤器Filter管理
六、过滤器的使用 ------ 2020-05-07
AngularJS 之过滤器
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">
        <p>{{msg | msgChange('java2')}}</p>
        <p>{{date | dateformat}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //   定义全局过滤器
        // dateFount ---过滤器的名称
        // function（data，arg0）{} data ---data 是要处理的数据 arg0 ---传过来的参数
        Vue.filter('msgChange', function (data, arg0) {
            data = "你好"
            return data + arg0;
        })
        function dategetTwo(date) {
            return date < 10 ? '0' + date : date;
        }
        // 整理日期
        // Vue.filter('dateformat',function(data,arg0){
        //     return data.getFullYear()+"-"+dategetTwo((data.getMonth()+1))+"-"+dategetTwo(data.getDate());

        // })
        Vue.filter('dateformat', function (data, arg0) {
            var y = data.getFullYear().toString().padStart(2, '0');
            var m = (data.getMonth() + 1).toString().padStart(2, '0');
            var d = data.getDate().toString().padStart(2, '0');

            // return y +'-'+m+'-'+d;
            // return `${dategetTwo(y)}-${dategetTwo(m)}-${dategetTwo(d)}`
            return `${y}-${m}-${d}`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "java2 班",
                date: new Date(),
            }
        })
    </script>
</body>

</html>