VUE过滤器filter

最新推荐文章于 2024-09-05 13:30:00 发布

小小野生程序员

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量117

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47276069/article/details/140466521

版权

</!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
    <!-- 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单的函数
    过滤器经常用在数据所需的格式化时使用：
    例如
        字符串的格式化
        以及日期时间的格式化等等
    过滤器最大的作用就是体现其复用性，如果我们在前端处理的某些文本信息每一次都需要经过重复的特殊处理，那么我们一定是要编写一个过滤器来使用。 -->
    <!-- 全局过滤器：全局过滤器指的是所有 vm 对象都能共享使用的过滤器 -->
    <!-- 过滤器能够使用在两个地方：（mustache）插值表达式/指令（bind 属性）
        过滤器的语法：使用管道符 "|"
        过滤器在插值表达式中的使用：
        案例1：将所有的字母变成大写
        案例2：定义格式化时间的全局过滤器-->
        <!-- 使用过滤器的语法：{{内容 | 过滤器名称}} -->
        <p>{{str1 | ucase}}</p>
        <p>{{currentTime | dateTimeManager}}</p>
        <!-- 过滤器在 v-for 中的使用:
            案例：将所有的商品进行打折（打 8 折，5 折... -->
        <p v-for="value in fruitList" :key="value.id">
            {{value.id}}------{{value.name}}------{{value.price}}
            {{value.id}}------{{value.name}}------{{value.price | priceManager}}
        </p>
        <!-- 连续使用多个过滤器 -->
        <p>{{str1 | filter1 | filter2}}</p>
    <!-- 私有过滤器:私有过滤器指的是在指定的 vm 对象中来定义过滤器，该过滤器只在当前的 vm 对象中会发挥作用，其他的 vm 对象不能使用的。
        语法：在 vm 对象中指定过滤器相关的属性和属性值-->
        <!-- 如果全局过滤器和私有过滤器重名,会默认使用私有过滤器，先找私有的后找全局的（就近原则） -->
        <!-- 全局和私有能够搭配使用，且从左向依次生效，具有信息传递性(后一个过滤器是在前一个过滤器处理的结果上进行进一步处理的) -->
        <p>{{str1 | filter3 | filter1}}</p>
    </div>
    <div id="app2">
        <p>{{str1 | filter3 | filter1}}</p>
    </div>
    <script>
        //自定义全局过滤器
        /*
            语法：Vue.filter
            参数1：为该过滤器命名
            参数2：函数，指定过滤器的行为
                函数参数：我们需要操作的数据
         */
        Vue.filter("ucase",function(value){
            //通过value的形参取得了需要操作的值
            //将值处理为大写字母
            value=value.toUpperCase();
            return value;

        })
        Vue.filter("dateTimeManager",function(dateTime){
            //取得日期时间具体数值    
            var y =dateTime.getFullYear();
            var m =(dateTime.getMonth()+1+"").toString().padStart(2,"0");
            var d =(dateTime.getDate()+"").toString().padStart(2,"0");
            var h =(dateTime.getHours()+"").toString().padStart(2,"0");
            var mi =(dateTime.getMinutes()+"").toString().padStart(2,"0");
            var s =(dateTime.getSeconds()+"").toString().padStart(2,"0");
            //在ES5中，必须使用+的形式对字符串进行拼接的操作
            //在ES6中，可以使用反引号 "`"来解决复杂的字符串拼接的工作
            return `${y}-${m}-${d} ${h}:${mi}:${s}`;
        })
        Vue.filter("priceManager",function(price){
            return parseInt(price)*0.8;
        })
        Vue.filter("filter1",function(value){
            return value.toUpperCase();
        })
        Vue.filter("filter2",function(value){
            return value+"123";
        })
        var vm1=new Vue({
            el : "#app",
            data:{
                "str1":"aaa",
                "currentTime":new Date(),
                "fruitList":[
                    {"id":"A0001","name":"苹果","price":10},
                    {"id":"A0002","name":"菠萝","price":15},
                    {"id":"A0003","name":"桃子","price":8},
                ]
            },
            methods:{

            },
            filters:{
                filter3:function(value){
                    return value+"bbb";
                }
            }
        })

        var vm2=new Vue({
            el : "#app2",
            data:{
                "str1":"aaa",
                "currentTime":new Date(),
                "fruitList":[
                    {"id":"A0001","name":"苹果","price":10},
                    {"id":"A0002","name":"菠萝","price":15},
                    {"id":"A0003","name":"桃子","price":8},
                ]
            },
        })
    </script>

</body>
</html>