广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue定义私有过滤器和基本使用
  • 570
分享到

vue定义私有过滤器和基本使用

2024-04-02 19:04:59 570人浏览 薄情痞子
摘要

私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器 使用方法也和全局过滤器一致,只是定义的地方不同 全局过

私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用,
全局过滤器点这里全局过滤器
使用方法也和全局过滤器一致,只是定义的地方不同
全局过滤器是在 script 中 通过Vue.filter 定义
私有过滤器定义方法:

<script>
        let vm = new Vue({
            el:'#app',
            data:{
            
            },
            filters: { // 当前实例私有的过滤器

            }
        })
    </script>
vm实列中,有和 data 同级的 filters,用来定义当前实例的私有过滤器

    <div id="app">
        <p>{{mes | addStr}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一个悲观的人,悲观的人做悲观的事"
            },
            filters: { // 当前实例私有的过滤器
                addStr(data,str="开心"){
                    return data.replace(/悲观/g,str)
                }
            }
        })
    </script>
输出结果为:
如果页面中 有第二个实例,vm2,去调用 vm 中的过滤器,是调用不到的
如果在页面上有一个全局过滤器,和私有过滤器,是可以同时调用的

<div id="app">
        <p>{{mes | setStr | addStr}}</p>
    </div>

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

        Vue.filter('setStr',function(data){
            return data+'我是全局过滤器'
        })

        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一个悲观的人,悲观的人做悲观的事"
            },
            filters: { // 当前实例私有的过滤器
                addStr(data,str="开心"){
                    return data.replace(/悲观/g,str)
                }
            }
        })
    </script>
输出结果:
总结:
在调用时我们在前面调用的 全局 ,后面是私有
但输出结果却是 私有过滤器先进行处理
所以,当同时调用全局和私有过滤器时,调用规则是谁离的近先输出谁,
先私有在全局

到此这篇关于 vue定义私有过滤器和基本使用的文章就介绍到这了,更多相关 vue定义私有过滤器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue定义私有过滤器和基本使用

本文链接: https://www.lsjlt.com/news/157928.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue定义私有过滤器和基本使用
    私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器 使用方法也和全局过滤器一致,只是定义的地方不同 全局过...
    99+
    2022-11-12
  • vue如何定义私有过滤器
    小编给大家分享一下vue如何定义私有过滤器,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用,全局过滤器点这里全局过滤器使用方法也和全...
    99+
    2023-06-25
  • vue 过滤器和自定义指令的使用
    目录过滤器 01. 是什么 02. 怎么做 (1)定义过滤器 (2)使用方式 (3)过滤器的参数03. 封装过滤器函数 自定义指令 01. 是什么 02. 基本概念 (1)钩子函数 ...
    99+
    2022-11-12
  • Vue过滤器怎么自定义及使用
    这篇文章主要介绍“Vue过滤器怎么自定义及使用”,在日常操作中,相信很多人在Vue过滤器怎么自定义及使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue过滤器怎么自定义及使用”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-04
  • 如何在vue中使用过滤器和自定义指令
    本篇文章给大家分享的是有关如何在vue中使用过滤器和自定义指令,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。过滤器过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果过滤...
    99+
    2023-06-15
  • vue全局过滤器基本使用方法是什么
    本篇内容介绍了“vue全局过滤器基本使用方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一.过滤器的概念Vue.js允许你自定义过滤...
    99+
    2023-06-25
  • Vue中过滤器定义以及使用方法实例
    目录介绍Vue中过滤器如何使用组件内过滤器全局过滤器补充:vue中的过滤器可以格式化以及美化内容总结介绍 过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用...
    99+
    2022-11-13
    vue过滤器的使用 vue的过滤器 vue的过滤器语法
  • Java过滤器Filter的基本使用教程
    过滤器Filter 用于拦截请求、过滤响应在不使用过滤器时,浏览器向服务器发送请求后,服务器将会直接去获取资源并响应给浏览器添加Filter后,浏览器向服务器发送请求,请求在到达服务...
    99+
    2023-02-22
    Java Filter Java Filter过滤器 Java过滤器
  • vue全局过滤器概念及注意事项和基本使用方法
    目录一.过滤器的概念1.自定义一个全局过滤器的格式二、过滤器的调用方法三.过滤器的注意事项四、基本使用方法一.过滤器的概念 Vue.js允许你自定义过滤器,可被用作一些常见的文本格...
    99+
    2022-11-12
  • Django零基础入门之自定义过滤器及模板中的使用
    目录引言自定义过滤器(1)首先(2)内置过滤器lower的使用:(3)自定义过滤器的使用:(4)模板中使用自定义过滤器:(5)效果展示:引言 分析Django内置的模板过滤器: 通...
    99+
    2022-11-12
  • ASP.NET MVC自定义异常过滤器使用案例
    目录一、需求二、案例1、创建工具类1.1、创建日志工具类1.2、创建网络工具类2、创建自定义异常类3、创建控制器4、测试在上一篇文章中讲解了自定义异常过滤器,这篇文章会结合工作中的真...
    99+
    2022-11-13
  • 使用SpringBoot如何实现自定义过滤器与拦截器
    使用SpringBoot如何实现定义过滤器与拦截器?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、自定义过滤器创建一个过滤器,实现javax.servlet.Filter...
    99+
    2023-05-31
    springboot 拦截器 监听器
  • vue中自定义指令(directive)的基本使用方法
    目录前言正文1.全局注册2.局部注册3.钩子函数及参数设置4.灵活用法(1)动态指令参数(2)函数简写方式(3)对象字面量方式5.使用场景写在最后前言 在vue项目中我们经常使用到 ...
    99+
    2022-11-12
  • PHP私有静态方法怎么定义和使用
    这篇文章主要介绍“PHP私有静态方法怎么定义和使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP私有静态方法怎么定义和使用”文章能帮助大家解决问题。什么是私有静态方法?在PHP面向对象编程中,...
    99+
    2023-07-05
  • Vue监听使用方法和过滤器实现
    目录前言过滤器局部过滤器代码全局过滤器watch监听简单监听复杂监听前言 今天是自学VUE整理知识点的第四天呢,今天整理一下过滤器,watch监听的知识点 过滤器 过滤器的作用:为页...
    99+
    2022-11-13
  • JavaScript函数的定义和基本使用方法
    1.用函数语句定义 先给一个例子,该函数的功能是返回数组元素的和; function sumArray(arr) { var sum = 0; for(var...
    99+
    2022-11-13
  • 深入探讨PHP私有静态方法的定义和使用
    PHP是一种非常流行的编程语言,经常用于Web应用程序开发。在PHP中,可以使用静态方法来执行一些与类相关的任务,而私有静态方法则是PHP面向对象编程中的一种特殊类型。在本文中,我们将深入探讨PHP私有静态方法的用途、如何定义和使用,以及它...
    99+
    2023-05-14
    私有静态方法 php
  • Vue生产和开发环境如何切换及过滤器的使用
    目录一、生产环境,开发环境切换第一种方法:通过配置.env文件来实现第二种方法二、过滤器三、moment时间库使用一、生产环境,开发环境切换 开发环境:开发环境就是在 /confi...
    99+
    2022-11-12
  • Python 函数(lambda 匿名函数、自定义函数、装饰器)基本使用指南
    Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段 lambda 匿名函数 对于单行函数,使用 lambda 表达式可以省去定义函数的过程,让代码更加简洁; 对于不需...
    99+
    2023-10-27
    python 开发语言
  • MySQL基础篇(03):系统和自定义函数总结,触发器使用详
    本文源码:GitHub·点这里 || GitEE·点这里 一、系统封装函数 MySQL 有很多内置的函数,可以快速解决开发中的一些业务需求,大概包括流程控制函数,数值型函数、字符串型函数、日期时间函数...
    99+
    2022-10-18
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作