Vue学习记录03-计算属性

最新推荐文章于 2024-09-11 08:28:28 发布

力博荣三维可视化

最新推荐文章于 2024-09-11 08:28:28 发布

阅读量102

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_21476953/article/details/81257846

版权

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

过滤器的概念和用法

1、过滤器概念

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

2、过滤器基本使用

下面展示了局部过滤器和全局过滤器的使用。

<body>
    <script src="./vue.js"></script>

    <div id="app">{{message | filterToUpperCase | }}</div>
    <script>
        // 定义一个全局的过滤器,实现所有字母转为大写字母
        Vue.filter("filterToUpperCase",(val)=>{
            return val.toUpperCase();
        });

        new Vue({
            el:"#app",
            data:{
                message:"hello",
            },
            filters:{
                // 定义一个局部过滤器,实现字符串翻转
                filterReverse:(value)=>{
                    return value.split("").reverse().join("");
                }
            }
        });
    </script>
</body>

3、过滤器接收多个参数

实现日期的格式化显示:

<body>
    <script src="./vue.js"></script>

    <div id="app">{{time | filterFormat("-")}}</div>
    <script>
        // 定义一个全局的过滤器,实现日期的格式化显示
        // value:日期
        // s:分隔符
        Vue.filter("filterFormat",(value,s)=>{
           var year = value.getFullYear();
           var month = value.getMonth();
           var day = value.getDate();
           return `${year}${s}${month}${s}${day}`;
        });

        new Vue({
            el:"#app",
            data:{
                time: new Date(),
            },
        });
    </script>
</body>

// 2018-6-9
最新的笔记更新在：
https://github.com/1097364388/learning

<全文结束>