VUE框架2中的过滤器之局部过滤器和全局过滤器------VUE框架

已于 2023-11-30 21:46:10 修改
阅读量892 收藏 22
点赞数 22
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript 前端框架 ecmascript js vue
于 2023-11-30 15:56:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134714695
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{money}}</h1>
        <h1>{{getPrice()}}</h1>
        <!-- 这样就是price的过滤器写法 -->
        <!-- 在VUE3中,过滤器被舍弃了 -->
        <!-- 返回值还可以走一遍filter,再次实现过滤 -->
        <!-- 第一个位置不用写,会自动传递 -->
        <!-- 过滤器只能用在两个位置,一个是插值语法,一个是v-bind中 -->
        <h1>{{price | filterA() | filterB(3)}}</h1>
        <!-- v-bind也可以使用 -->
        <input type="text" :value="price | filterA() | filterB(3)"/>
        <!-- v-model是不能用过滤器的 -->
    </div>
    <div id="app1">
        <h1>{{price1 | filterA() | filterB(3)}}</h1>
    </div>
    <script>
        // 配置全局过滤器
        Vue.filter("filterA",function(val){
            if(val === undefined || val === null || val === '')
            {
                return '-';
            }
            return val;
        });
        Vue.filter("filterB",function(val,number){
            // 确保传过来的数据保留两位小数
            return val.toFixed(number);
        });
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                price : 50.6
            },
            methods : {
                getPrice()
                {
                    if(this.price === undefined || this.price === null || this.price === '')
                    {
                        return '-';
                    }
                    return this.price;
                }
            },
            computed : {
                money()
                {
                    if(this.price === undefined || this.price === null || this.price === '')
                    {
                        return '-';
                    }
                    else
                    {
                        return this.price;
                    }
                }
            },
            // 过滤器可以接受value的数据,我们可以在这里进行格式化,而这里因为没有this
            // 就可以和业务代码剥离开了,耦合度更低了,复用性更强了
            filters : {
                // 局部过滤器
                // filterA(val){
                //     if(val === undefined || val === null || val === '')
                //     {
                //         return '-';
                //     }
                //     return val;
                // },
                // filterB(val,number){
                //     // 确保传过来的数据保留两位小数
                //     return val.toFixed(number);
                // }
            }
        });
        const vm1 = new Vue({
            el : "#app1",
            data : {
                price1 : 23
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <h1>{{money}}</h1>

        <h1>{{getPrice()}}</h1>

        <!-- 这样就是price的过滤器写法 -->

        <!-- 在VUE3中,过滤器被舍弃了 -->

        <!-- 返回值还可以走一遍filter,再次实现过滤 -->

        <!-- 第一个位置不用写,会自动传递 -->

        <!-- 过滤器只能用在两个位置,一个是插值语法,一个是v-bind中 -->

        <h1>{{price | filterA() | filterB(3)}}</h1>

        <!-- v-bind也可以使用 -->

        <input type="text" :value="price | filterA() | filterB(3)"/>

        <!-- v-model是不能用过滤器的 -->

    </div>

    <div id="app1">

        <h1>{{price1 | filterA() | filterB(3)}}</h1>

    </div>

    <script>

        // 配置全局过滤器

        Vue.filter("filterA",function(val){

            if(val === undefined || val === null || val === '')

            {

                return '-';

            }

            return val;

        });

        Vue.filter("filterB",function(val,number){

            // 确保传过来的数据保留两位小数

            return val.toFixed(number);

        });

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                price : 50.6

            },

            methods : {

                getPrice()

                {

                    if(this.price === undefined || this.price === null || this.price === '')

                    {

                        return '-';

                    }

                    return this.price;

                }

            },

            computed : {

                money()

                {

                    if(this.price === undefined || this.price === null || this.price === '')

                    {

                        return '-';

                    }

                    else

                    {

                        return this.price;

                    }

                }

            },

            // 过滤器可以接受value的数据,我们可以在这里进行格式化,而这里因为没有this

            // 就可以和业务代码剥离开了,耦合度更低了,复用性更强了

            filters : {

                // 局部过滤器

                // filterA(val){

                //     if(val === undefined || val === null || val === '')

                //     {

                //         return '-';

                //     }

                //     return val;

                // },

                // filterB(val,number){

                //     // 确保传过来的数据保留两位小数

                //     return val.toFixed(number);

                // }

            }

        });

        const vm1 = new Vue({

            el : "#app1",

            data : {

                price1 : 23

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 22
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
例如，定义一个全局过滤器'dateFormat'，它和私有过滤器的定义类似，不同之处在于它是在Vue实例创建之前定义的，且作用范围是全局的。 4. 过滤器在双花括号插值和v-bind表达式中的应用 过滤器通常被用于双花括号...
Vue2中过滤器的用法详解
青春木鱼的博客
12-09 7731
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。
【Web_Vue2】Vue中的过滤器（filter）
qq_45703937的博客
12-30 2910
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
Vue 过滤器（Filter）的理解与用法
最新发布
My_wife_QBL的博客
07-04 795
过滤器是 Vue 提供的一种数据处理机制，它可以在模板中对数据进行格式化或转换。过滤器通常用于文本格式化，例如日期格式化、货币格式化、字符串截取等。全局过滤器可以在整个应用中使用，通过Vue.filter方法进行定义。if (!});Vue 过滤器是一个强大的工具，它允许我们在模板中对数据进行格式化处理。通过全局过滤器和局部过滤器的定义，我们可以在整个应用或特定组件中使用过滤器。过滤器支持参数传递和串联使用，使得数据处理更加灵活和强大。在使用过滤器时，我们应该保持简单、避免副作用，并合理使用第三方库。
【Vue2.0源码学习】过滤器篇
一个前端开发者
07-04 1046
过滤器在我们日常开发中应该算是一个非常常用的功能了，它经常会被用来格式化模板中的文本。过滤器可以单个使用，也可以多个串联一起使用，还可以传参数使用。那么在Vue中过滤器是如何工作的呢？其内部原理是怎样的？Vue又是如何识别出我们所写的过滤器的？接下来，我们将从源码角度出发，探究过滤器内部的工作原理，分析其工作流程，揭开它神秘的面纱。if(!也可以在创建Vue实例之前使用全局APIVue.filterif(!当全局过滤器和局部过滤器重名时，会采用局部过滤器。
Vue2 过滤器
qq_52731478的博客
06-05 105
【代码】Vue2 过滤器。
vue2中的(filters)局部过滤器与全局过滤器、过滤器传参、调用多个过滤器
qq_57423665的博客
04-19 1780
在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。dayjs.min.js插件能够快速实现时间格式化，直接百度dayjs可以搜索或下载文件和查看官方文档；过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。如果全局过滤器和私有过滤器名字一致, 此时按照“就近原则”，调用的是”私有过滤器”；是vue为开发者提供的功能，常用于文本的格式化。
vue-cli 3 全局过滤器的实例代码详解
10-16
示例代码展示了如何在 vue-cli 3 项目中实现和使用全局过滤器。首先在 filters.js 文件中定义了几个过滤器，然后在 main.js 文件中将这些过滤器注册为全局过滤器。之后，在组件的模板中直接使用这些过滤器进行数据...
Vue-Cli中自定义过滤器的实现代码
08-29
**index.js** 文件用于聚合所有自定义过滤器，并以键值对形式导出，以便在主入口文件`main.js`中一次性注册到全局过滤器。例如： ```javascript // 导入日期过滤器 import dateFormat from './DateFormat'; // 以...
Vue2之filters过滤器基础与进阶
如果相遇，那么你好哦~
09-14 1559
Vue2的filters过滤器基础使用
Vue.js过滤器filters
m0_61961937的博客
04-22 1388
Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变）过滤器可以用在两个地方：双花括号插值或v-bind表达式。
Vue2：Vue2过滤器、计算属性、监听器
孤安先生的博客，作者主站正在重构中，敬请期待！
11-09 746
filter转换格式，过滤器就是一个函数，传入值返回处理后的值；当变量的值，需要通过计算得到，可以使用 computed；watch 监听 data / computed 属性值的改变。
vue filter(过滤器)的使用
weixin_46016926的博客
12-14 247
【代码】vue filter(过滤器)的使用。
Vue2的基础用法——Vue的过滤器，侦听器，axios
shhghvvh的博客
01-10 448
过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind 属性绑定。
vue2 全局过滤器 filters
CSSAJBQ_的博客
06-20 879
当我们需要反复使用过滤器或多个组件使用的过滤器相同时应该考虑全局过滤器。
vue2注册全局过滤器filters
m0_68716504的博客
05-27 481
【代码】vue2注册全局过滤器filters。
开始学习vue2(Vue方法)
Mangcun_tutu的博客
01-23 1394
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。.相关属性 改变都会触发当前函数，当数据没有变化时，它。4.购物车下面有选中的课程记录，和选中商品的金额。2.点击添加购物车，此商品会添加到下面的表格中。）是 vue 为开发者提供的功能，常用于。在 filters 节点下定义的过滤器，1.添加课程和价格的功能，添加上的商品。数据变化时执行异步操作，这个时候使用。在创建 vue 实例期间，可以在。，则依然可以使用过滤器相关的功能。允许开发者监视数据的变化，从而。中的属性冲突，但是watch。
vue2中的过滤器
yezi153的博客
10-26 1113
1.过滤器 使用场景:一个值需要经过处理后返回另一个结果 类似计算属性 计算之后返回计算的结果 // 全局过滤器写法 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) // 局部过滤器 filters: { 过滤器名(值) { return 处理后的结果 } } 2.计算属性 使用场景:一个变量的结果需要另外变量计算得来 特点:函数内变量变化,会自动计算结果返回,有缓存的特性 缓存:依赖项(计算属性的函数里面使用的变量)不变,多次调
Vue 过滤器详解
weixin_43749805的博客
06-14 2346
在 Vue.js 中，过滤器是一种非常有用的功能，它可以用于对数据进行格式化和处理，以便更好地展示给用户。过滤器提供了一种简单而灵活的方式来转换数据，并在模板中应用这些转换。本文将深入解析 Vue 的过滤器功能。
Vue.js实战：过滤器与自定义全局指令解析
文档涵盖了全局过滤器和私有过滤器的概念、用法，以及它们在不同场景下的应用。此外，还讨论了自定义全局指令的功能和重要性。" 在Vue.js中，过滤器是一个关键的组件，它允许开发者对数据进行处理并返回格式化的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值