园龄：3年5个月粉丝：9 关注：0

第一章 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>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15408185.html

posted @ 2021-10-14 19:38 何以之阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

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

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

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

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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