《Vue.js从入门到实战》_example_03_09_filters过滤器

最新推荐文章于 2022-11-15 11:22:51 发布

dpj_1980

最新推荐文章于 2022-11-15 11:22:51 发布

阅读量65

点赞数

分类专栏：每日学习文章标签： vue

本文链接：https://blog.csdn.net/dpj_1980/article/details/109126472

版权

每日学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

过滤器可对数据进行筛选、过滤、格式化，它与methods、computed和watch不同的是，其不能改变原始值。过滤器的使用样例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>当前时间：{{date | formateTime | formateTimeTwo}}</h1>
        </div>
        <script>
            var parseDate = function(datetime){
                return datetime<10?'0'+datetime:datetime;
            }
            var app= new Vue({
                el: '#app',
                data:{
                   date:new Date()
                },
                filters:{
                    formateTime:function(val){
                        var date = new Date(val);
                        var year = date.getFullYear();
                        var month = parseDate(date.getMonth()+1);
                        var day = parseDate(date.getDate());
                        var hours = parseDate(date.getHours());
                        var min = parseDate(date.getMinutes());
                        var sec = parseDate(date.getSeconds());
                        return year+'-'+month+'-'+day+' '+hours+':'+min+':'+sec;
                    },
                    formateTimeTwo:function(val){
                        return val+"这是第二个过滤器的内容";
                    }
                },
                created:function(){
                    var that = this;
                    this.timer = setInterval(function(){
                        that.date = new Date();
                    },1000);
                },
                beforeDestory:function(){
                    if(this.timer){
                        clearInterval(this.timer);
                    }
                }
            })
        </script>
    </body>
</html>

dpj_1980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《Vue.js从入门到实战》_example_03_09_filters过滤器

过滤器可对数据进行筛选、过滤、格式化，它与methods、computed和watch不同的是，其不能改变原始值。过滤器的使用样例代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> <
复制链接

扫一扫