广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue的过滤器你真了解吗
  • 195
分享到

Vue的过滤器你真了解吗

2024-04-02 19:04:59 195人浏览 独家记忆
摘要

目录1.过滤器1.1对过滤器的理解1.2全局过滤器:1.3局部过滤器:1.4过滤器的案例总结1. 过滤器 案例中使用到时间格式相关api 1.1 对过滤器的理解 定义:对要显示的数据

1. 过滤器

案例中使用到时间格式相关api

1.1 对过滤器的理解

定义:对要显示的数据进行特定格式化后在显示

适用:做一些简单的逻辑处理

特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据

​ 1. 语法 : data | 过滤器

​ 不传参数默认将data值传入,并且自动调用函数,函数可接收到value

​ 传参数并不会覆盖掉第一个参数,第一个参数默认是value,第二个参数才是 传入的参数

​ 2. 滤器可以以串联的形式

​ data | 过滤器 | 过滤器

​ 执行的顺序是将data当做参数传入到第一个过滤器中,第一个过滤器处理完,返回的

​ 值作为第二个过滤器的参数

1.2 全局过滤器:

Vue.filter(filterName, function(value){
  return value.slice(0, 4);
})
new Vue({
	.
	..
	...
})

1.3 局部过滤器:

new Vue{
	filters:{
		filterName(value){
      return value.slice(0, 4);
		}
	}
}

在html中使用过滤器

<div>{{ handledata | filtername }}</div>
<div>{{ handledata | filtername(参数) }}</div>

1.4 过滤器的案例

 <div id="root">
        <h3>methods写的:{{time()}}</h3>
        <h3>computed写的:{{time1}}</h3>
        <h3>过滤器的写的:{{number | ftime("YYYY-MM-DD HH:mm:ss") | qjtime}}</h3>
    </div>
    <div id="root2">
        <hr>
        <h3>{{name | qjtime}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false
        // 全局过滤器
        Vue.filter('qjtime', function (val) {
            return val.slice(0, 4)
        })
        let vm = new Vue({
            el: '#root',
            data: {
                number: Date.now()
            },
            methods: {
                time() {
                    return dayjs(this.number).fORMat("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            computed:
            {
                time1: {
                    get() {
                        return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss")
                    }
                }
            },
            // 局部过滤器
            filters:
            {
                // 这是ES的语法表示如果有传参数就使用传进来的参数,如果没有传参就使用
                ftime(val, str = "YYYY年MM月DD日 HH:mm:ss") {
                    return dayjs(val).format(str)
                },
            }
        })

        new Vue({
            el: "#root2",
            data: {
                number: Date.now(),
                name: '我是第二个Vue'
            }
        })
    </script>

总结

以上就是今天要讲的内容,本文介绍了对过滤器的一些相关知识,希望对大家有所帮助!

--结束END--

本文标题: Vue的过滤器你真了解吗

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

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

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

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

下载Word文档
猜你喜欢
  • Vue的过滤器你真了解吗
    目录1.过滤器1.1对过滤器的理解1.2全局过滤器:1.3局部过滤器:1.4过滤器的案例总结1. 过滤器 案例中使用到时间格式相关API 1.1 对过滤器的理解 定义:对要显示的数据...
    99+
    2022-11-13
  • Java中的布隆过滤器你真的懂了吗
    目录什么是布隆过滤器实现的核心思想怎么理解典型应用场景什么是布隆过滤器 布隆过滤器(Bloom Filter)是一种空间效率非常高的随机数据结构,它利用位数组(BitSet)表示一个...
    99+
    2023-05-18
    Java布隆过滤器原理 Java布隆过滤器应用 Java布隆过滤器
  • Java的布隆过滤器你了解吗
    目录BitMap布隆过滤器运用场景传统数据结构的不足实现原理误判现象实现Redis 的 bitmapRedisBloomGuava 的 BloomFilterRedisson解决缓存...
    99+
    2022-11-13
  • JavaWeb的监听器和过滤器你了解吗
    目录1.监听器---->Context,Session2.监听器三大作用域3.属性监听器4.过滤器4.1过滤器的使用4.2过滤器的拦截路径4.3过滤器的拦截顺序4.4过滤器的四...
    99+
    2022-11-13
  • Vue.js 的过滤器你了解多少
    目录一、过滤器作用二、过滤器的使用方式三、过滤器的分类四、全局过滤器五、局部过滤器 六、全局过滤器和局部过滤器重名现象总结一、过滤器作用 过滤器用于进行文本内容格式化处理。...
    99+
    2022-11-13
  • Vue的diff算法原理你真的了解吗
    目录思维导图0. 从常见问题引入1. 生成虚拟dom1. h方法实现2. render方法实现3. 再次渲染2. diff算法1. 对常见的dom做优化情况1:末尾追加一个元素(头和...
    99+
    2022-11-13
  • Java中的基本容器知识你真的了解过吗?
    前言:尽量使用简单易懂的通俗语言让大家初步了解各个重要的知识点。博学之,审问之,慎思之,明辨之,笃行之。   一、容器(Collection)   Collection容器其实是用来存储独立元素的各种数据结构,如图所示。主要是S...
    99+
    2023-09-01
    数据结构 java 容器 链表
  • 你真的了解IP地址吗?
    本文已收录于专栏 ⭐️ 《计算机网络》⭐️ 学习指南: IP协议基本认识分类地址多播地址 无分类地址划分方式子网掩码 IP 分片与重组IPv6基本认识IPv4 首部与 ...
    99+
    2023-09-09
    tcp/ip 网络 服务器 网络协议 ip
  • 你真的需要了解Bash吗?
    Bash是一种强大的命令行解释器,它是Linux和macOS操作系统上的默认Shell。尽管它是如此重要,但很多人并不了解Bash的实际用途。在本文中,我们将探讨Bash的重要性以及它如何帮助我们更好地管理和控制计算机系统。 Bash是什么...
    99+
    2023-08-15
    path bash http
  • 关于Java Object你真的了解了吗
    导读: 在平时的coding中hashCode()和equals()的使用的场景有哪些?clone深复制怎么实现?wait()和notify()有什么作用?finalize()方法干嘛的?看似coding中使用的不多,不重要,但是有没有跟我...
    99+
    2023-05-31
    java object ava
  • SpringBoot 拦截器妙用你真的了解吗
    HandlerInterceptor 详解 HandlerInterceptor 允许定制 handler 处理器执行链的工作流接口。我们可以自定义拦截器用于拦截 handlers ...
    99+
    2022-11-12
  • java的泛型你真的了解吗
    目录泛型的概述和优势自定义泛型类自定义泛型方法自定义泛型接口泛型通配符、上下限总结泛型的概述和优势 泛型概述 泛型:是JDK5中引入的特性,可以在编译阶段约束操作的数据类型,并进行检...
    99+
    2022-11-13
  • 关于@Autowierd && @Resource 你真的了解吗
    目录关于@Autowierd && @Resource 你真的了解吗1.@Autowierd2.@Resource2.1@Resource具体装配顺序,即指定的注入实...
    99+
    2022-11-12
  • JavaVolatile关键字你真的了解吗
    目录正文并发编程的三要素1.原子性2.可见性3.有序性VolatileVolatile 的内存模型Volatile 的实现原理(1) lock(2) unclock(3) read(...
    99+
    2022-11-12
  • Java 缓存:你真的了解它吗?
    在 Java 开发中,缓存是一个非常重要的概念。它可以大大提升应用程序的性能,减少对底层资源的占用,提高用户体验。但是,你真的了解 Java 缓存吗?本文将为大家介绍 Java 缓存的基本概念、分类、应用场景以及常见的缓存框架。 一、缓存...
    99+
    2023-10-06
    缓存 学习笔记 面试
  • 内网穿透你真的了解吗?
    前言 内网穿透作为程序员常用的调试手段之一,我们可以通过在个人电脑上运行花生壳或者 frp 等方式,让他人访问我们本地启动的服务,而且这种访问可以不受局域网的限制,当我们使用ngrok,frp等开源框架时,你是否有好奇过它神奇的作用?明明没...
    99+
    2023-08-31
    网络穿透 NAT 内网 后端开发 Linux服务器开发
  • 你真的了解 PHP 关键字 API 容器吗?
    PHP 是一种广泛使用的服务器端脚本语言,由于其易学易用的特性,它已经成为了众多 Web 开发者的首选语言。而在 PHP 中,有一些关键字,比如 API 和容器,它们在开发中也扮演着非常重要的角色。本文将详细介绍这两个关键字,帮助读者更好地...
    99+
    2023-10-25
    关键字 api 容器
  • ASP容器接口IDE:你真的了解它吗?
    ASP容器接口IDE是一种重要的工具,它可以帮助开发人员更加轻松地开发ASP应用程序。但是,很多开发人员并不了解这个工具,甚至不知道它的存在。在本文中,我们将深入探讨ASP容器接口IDE的相关内容,了解它的功能和使用方法。 一、ASP容器...
    99+
    2023-08-02
    容器 接口 ide
  • C++的运算符你真的了解吗
    目录前言1 算术运算符2 赋值运算符3 比较运算符4 逻辑运算符总结前言 运算符的作用:用于执行代码的运算 主要有: 1 算术运算符 用于处理四则运算 对于前置递增:将递增运算前...
    99+
    2022-11-13
  • Golang中的泛型你真的了解吗
    目录什么是泛型为什么需要泛型泛型语法类型参数类型集类型推断总结Golang 在 1.18 版本更新后引入了泛型,这是一个重要的更新,Gopher 万众瞩目,为 Golang 带来了更...
    99+
    2023-05-20
    Golang泛型用法 Golang泛型学习 Golang泛型 Go 泛型
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作