vuejs中过滤器使用

最新推荐文章于 2022-06-09 16:45:47 发布

geekmice

最新推荐文章于 2022-06-09 16:45:47 发布

阅读量201

点赞数

分类专栏：前端文章标签： vue.js js

本文链接：https://blog.csdn.net/greek7777/article/details/120464032

版权

前端专栏收录该内容

63 篇文章 3 订阅

订阅专栏

文章目录

1、过滤器
2、分类
3、代码演示

1、过滤器

过滤器：被用于一些常见的文本格式化，一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数;

2、分类

分类：全局过滤器和局部过滤器
全局过滤器：定义创建的vue对象之前，全局即可使用；
局部过滤器：定义在vue对象里面，只可在当前实例对象中使用；

简要说明

当有局部和全局两个名称相同的顾虑器时候，采用就近元素进行调用，即局部过滤器优先于全局过滤器；
一个表达式可以使用多个过滤器啊，过滤器之间使用管道符|隔开，执行顺序从左往右；

3、代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-过滤器使用</title>
</head>

<body>
    <div id="app">
        <h2>全局过滤器</h2>
        <h1>{{word | upperWord}}</h1>
        <h2>局部过滤器</h2>
        <h1>{{word | lowerWord}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        /**
         * 过滤器：被用于一些常见的文本格式化，一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数
         * 分类：全局过滤器和局部过滤器
         */
        /**
         * upperWord:全局过滤器名字
         * 字母变大写
         */
        Vue.filter("upperWord", function (word) {
            return word.toUpperCase();
        })
        const app = new Vue({
            el: "#app",
            data: {
                word: "GEEKMIce"
            },
            // 局部过滤器
            filters: {
                lowerWord(word) {
                    return word.toLowerCase();
                }
            }
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

geekmice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs中过滤器使用

文章目录1、过滤器2、分类3、代码演示1、过滤器过滤器：被用于一些常见的文本格式化，一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数;2、分类分类：全局过滤器和局部过滤器全局过滤器：定义创建的vue对象之前，全局即可使用；局部过滤器：定义在vue对象里面，只可在当前实例对象中使用；简要说明当有局部和全局两个名称相同的顾虑器时候，采用就近元素进行调用，即局部过滤器优先于全局过滤器；一个表达式可以使用多个过滤器啊，过滤器之间使用管道符|隔开，执行顺序从左往右；
复制链接

扫一扫