第一章 Vue核心 第十四节 过滤器

过滤器：
    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑）
    语法：
        1.注册过滤器：Vue.filter(name, callback) 或 new Vue({filters:{}})
        2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
    备注：
        1.过滤器也可以接收额外参数、多个过滤器也可以串联
        2.并没有改变原本的数据，是产生新的数据

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../../鼠标指针样式.css"/>
</head>
<body>
    <div id="root">
        <h2>未经处理的时间戳</h2>
        <h3>现在是：{{time}}</h3>

        <h2>局部过滤器</h2>
        <h3>现在是：{{time | add1('_000') | add2}}</h3>
    </div>
    <div id="root2">
        <h2>全局过滤器</h2>
        <h3>现在是：{{time | removeLast}}</h3>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        //全局过滤器
        Vue.filter('removeLast',function (value){
            return value.toString().slice(0,value.toString().length-4);
        });
        new Vue({
            el:'#root',
            data:{
                time:Date.now()
            },
            //局部过滤器
            filters:{
                add1(value,str='_123'){
                    console.log(value);
                    return value.toString()+str;
                },
                add2(value,str='_124'){
                    console.log(value);
                    return value.toString()+str;
                }
            }
        });
        new Vue({
            el:'#root2',
            data:{
                time:Date.now()
            }
        });
    </script>
</body>
</html>
posted @ 2021-10-14 19:38  何以之  阅读(24)  评论(0)    收藏  举报