Vue过滤器的使用(1)

最新推荐文章于 2022-05-24 00:00:59 发布

tong_struggller

最新推荐文章于 2022-05-24 00:00:59 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： VUE 过滤器

本文链接：https://blog.youkuaiyun.com/tong_struggller/article/details/86152549

VUE 专栏收录该内容

0 篇文章

订阅专栏

过滤器的简单使用，看代码:

注意：当私有过滤器和全局过滤器方法名称一样时，采用就近原则，优先调用私有过滤器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器的使用</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/bootstrap-3.3.7.css">
</head>
<body>
<h1>过滤器的使用</h1>
<div id="app">
    {{msg | filterData(msg)}}<br>
    {{dataStr | dateFilter(dataStr)}}
</div>
<script type="text/javascript">

    /*过滤器的使用   全局过滤器
  Vue.filter('过滤器的名称',function () {})*/
    Vue.filter('filterData',function (msg) {
        console.log('进入到过滤器了')
        return msg+"123";
    });
    Vue.filter('dateFilter',function (dataStr) {
        var date=new Date(dataStr);
        var y=date.getFullYear();
        var m=date.getMonth()+1;
        var d=date.getDate();
        //return y+'-'+m+'-'+d;
        return `${y}-${m}-${d}`;
    });


    var app = new Vue({
        el:"#app",
        data:{
            msg:"曾经我也是一个单纯的孩子，理想深远",
            dataStr:"2019-01-09 14:45:33.057"
        },
        filters:{} //定义私有过滤器
    })


</script>
</body>
</html>