[VUE] filter过滤器、计算属性、methods方法的区别

参考资料:

https://blog.csdn.net/kekeChris/article/details/104758106/

https://blog.csdn.net/weixin_39152200/article/details/107174590

https://www.cnblogs.com/panax/p/10824594.html

filter过滤器

vue 对数据提供一个 filter 的处理器,用以在不改变data 的情况下 输出前端需要的数据格式。

定义过滤器有两种方式,第一种是全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。

全局过滤器

Vue.filter('formatTime', function (value) {const date = new Date(val);const hour = date.getHours();const minutes = date.getMinutes();const seconds = date.getSeconds();return `${hour} : ${minutes} : ${seconds}`;})

组件内部的过滤器

<template><span>{{ time | formatTime }}</span>
</template><script>
export default {filters: {formatTime(value) {// 过滤器的值作为过滤器函数的参数const date = new Date(value);const hour = date.getHours();const minutes = date.getMinutes();const seconds = date.getSeconds();return `${hour} : ${minutes} : ${seconds}`;}},data() {return {time: '2024-01-01'}},methods: {}
}
</script><style lang="scss" scoped></style>

1.在一个{{message}}模板中 可以添加多个filter 函数对message 处理;

   如:{{ message | filterA | filterB }}

2.在filter中可有传多个参数,但是filters的function的默认第一位参数 当前的message的值 value,所以在写函数的时候应注意,自定义的参数是从第二位开始传的。

   如:{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串'arg1'作为第二个参数,表达式 arg2 的值作为第三个参数。

计算属性

可以将计算属性看做是Vue对象中定义的一个特殊的属性,不像普通属性那样直接返回结果,而是经过计算后再返回结果。在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等。计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 响应式依赖 不改变,无论多少次访问,都会立即返回先前的计算结果,而不用重复执行 getter 函数。

示例:

<template><span>{{ publishedBooksMessage }}</span>
</template><script>
export default {data() {return {author: {books: ["Advanced Guide","Basic Guide","The Mystery",],},}},computed: {// 一个计算属性的 getterpublishedBooksMessage() {return this.author.books.length > 0 ? 'Yes' : 'No'}},methods: {}
}
</script><style lang="scss" scoped></style>

methods方法

是在method中定义一个方法,和正常的javascript定义方法是一样。method中定义的方法是没有默认参数的,和过滤器不一样。每次访问,即使返回结果都一样时,method中定义的方法每一次都仍会重新进行调用,不同于计算属性只调用一次。

示例:

<template><span>不止1个:{{ getMessage(1) }}</span><span>不止2个:{{ getMessage(2) }}</span>
</template><script>export default {data() {return {author: {books: ["Advanced Guide","Basic Guide","The Mystery",],},};},methods: {getMessage(length) {return this.author.books.length > length ? "Yes" : "No";},},};
</script><style lang="scss" scoped></style>

filter过滤器、计算属性、methods方法的区别

过滤器
1、过滤器适合多个同样计算方法的属性的计算;
2、过滤器可以定义为全局过滤器,在多个vue实例中使用;
3、过滤器可以接收多个参数进行计算;
4、过滤器没有缓存机制,每调用一次都会计算一次;
5、过滤器相当于定义一个特殊的方法

计算属性
1、计算属性适合用在单个属性的计算;
2、计算属性只能在单个vue实例中使用;
3、计算属性不能直接传参数,只能使用data中定义的变量进行计算,或者使用闭包来接收参数;
4、计算属性有缓存机制,可减少调用次数;
5、计算属性相当于定义一个变量

methods方法

1、methods方法适合无同样计算方法的计算、多个属性的计算、异步执行的计算等;
2、methods方法可以灵活定义,在vue实例中使用;
3、methods方法没有默认参数,需要自定义参数;
4、methods方法没有缓存机制,每调用一次都会计算一次;
5、methods方法相当于一个正常的javascript定义的方法;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于纯JavaScript实现的MODBUS-RTU(串口和TCP) modbus-serial

modbus-serial 如果你需要使用JavaScript来操作一台RS458的设备&#xff0c;那么你一定不能错过这个库 modbus-serial。 安装和使用 npm install modbus-serial支持的功能码 功能码函数FC1 读取读线圈寄存器readCoils(coil, len) FC2 读离散输入寄存器readDiscreteInputs(a…

【unocss】自用

unocss中文官网1 不知道简写的可以在这里查 第一步 npm install -D unocss第二步 // vite.config.ts import UnoCSS from unocss/vite import { defineConfig } from viteexport default defineConfig({plugins: [UnoCSS()] })// main.ts import virtual:uno.css第三步 在…

基于Springboot的在线博客网站

基于SpringbootVue的在线博客网站的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 博客标签 博客分类 博客列表 图库相册 后台登录 后台首页 用户管理 博客标…

vue中引入字体资源遇到的问题

font-face {font-family: "Effra-Regular";src: url("~/assets/fonts/Effra-Regular.woff"); }这种写法能加载字体&#xff0c;但是无法应用字体 font-face {font-family: "Effra-Regular";src: url("/assets/fonts/Effra-Regular.woff&qu…

Android 设置头像 - 裁剪及圆形头像

书接上文 Android 设置头像 - 相册拍照&#xff0c;通过相册和照片的设置就可以获取到需要的头像信息&#xff0c;但是在通常情况下&#xff0c;我们还想要实现针对头像的裁剪功能和圆形头像功能。 先上截图&#xff1a; 图像裁剪 通常裁剪可以分为程序自动裁剪和用户选择裁剪…

基于SpringBoot实现各省距离Excel导出实战

目录 前言 一、列表及图表信息展示 1、数据过滤调整 2、信息列表及图表展示 3、Excel写入 二、界面可视化 1、Echarts图表和列表展示 2、城市详情和下载功能设计 三、成果展示 1、图表展示 2、部分城市数据分析 总结 前言 今天是五一黄金周假期第二天&#xff0c;不知…

电脑自带dll修复在哪里,使用dll修复工具解决dll问题

在我们日常与电脑相伴的工作与学习过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是“无法找到.dll”或“找不到.dll文件”。这种情况通常是由于dll文件丢失或损坏导致的。dll文件是动态链接库文件&#xff0c;它包含了许多程序运行所需的函数和资源…

使用 BurpSuite 基于 Token 机制实施暴力破解

前言 Token是一种用于身份验证和授权的令牌&#xff0c;通常由服务器生成并发送给客户端&#xff0c;客户端在后续的请求中携带该令牌来进行身份验证和授权操作。Token的使用可以增强应用程序的安全性&#xff0c;避免了直接传递敏感凭证&#xff08;如用户名和密码&#xff0…

SPRINGBOOT+VUE项目实战

第一章> 1、ElementUI 2、布局与主体 3、增删改查 4、路由 5、播放组件 第二章> 6、分页 7、代码生成 8、导入导出 9、用户登录 10、…

Golang | Leetcode Golang题解之第61题旋转链表

题目&#xff1a; 题解&#xff1a; func rotateRight(head *ListNode, k int) *ListNode {if k 0 || head nil || head.Next nil {return head}n : 1iter : headfor iter.Next ! nil {iter iter.Nextn}add : n - k%nif add n {return head}iter.Next headfor add > …

leaflet加载wms服务实现wms交互

leaflet地图与wms服务的交互&#xff0c;点击wms服务获取地理区域信息以及后续操作 加载wms服务 给地图添加监听点击事件 构造GetFeatureInfo发送请求&#xff0c;需要包含WMS服务的URL、请求的类型&#xff08;GetFeatureInfo&#xff09;、返回信息的格式&#xff08;通常是…

golang判断通道chan是否关闭的2种方式

chan通道在go语言的办法编程中使用频繁&#xff0c;我们可以通过以下2种方式来判断channel通道是否已经关闭&#xff0c;1是使用 for range循环&#xff0c;另外是通过 for循环中if 简短语句的 逗号 ok 模式来判断。 示例代码如下&#xff1a; //方式1 通过for range形式判断…

进销存单机版和excel进销存那个好用

进销存单机版和EXCEL进销存哪个好用&#xff1f;单机版是安装在单台电脑上使用的&#xff0c;它不能像网络版一样可以多台电脑同时共享数据&#xff0c;所以进销存单机版有一个优势就是不需要连接网络也可以使用。 进销存单机版 进销存软件单机版是经过开发人员设计好的一种信…

es环境安装及php对接使用

Elasticsearch Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是一种流行的…

postman一直转圈圈,无法启动

解决 地址栏输入%appdata%进入此目录&#xff0c;删除%appdata%目录下的postman文件可以解决问题。

贪心算法 Greedy Algorithm

1) 贪心例子 称之为贪心算法或贪婪算法&#xff0c;核心思想是 将寻找最优解的问题分为若干个步骤 每一步骤都采用贪心原则&#xff0c;选取当前最优解 因为没有考虑所有可能&#xff0c;局部最优的堆叠不一定让最终解最优 v2已经不会更新v3因为v3更新过了 贪心算法是一种在…

react路由路径兼容.html

react路由路径兼容.html 背景根文件代码路由代码nginx配置 背景 因为react-router 的路径是没有.html后缀的&#xff0c;这样对于和其他系统有交互的时候&#xff0c;让别人改url地址不是很方便&#xff0c;所以想办法进行了老系统的兼容操作。 根文件代码 import React fro…

Spring Boot系列之条件注解

概述 想要搞懂Spring Boot自动配置&#xff0c;绕不过条件注解&#xff0c;即Conditional&#xff0c;可用于根据某个特定的条件来判断是否需要创建某个特定的Bean。本文分析基于spring-boot-autoconfigure-3.2.4版本。 Conditional注解可以添加在被Configuration、Component…

Ps 滤镜:智能锐化

Ps菜单&#xff1a;滤镜/锐化/智能锐化 Filter/Sharpen/Smart Sharpen 智能锐化 Smart Sharpen滤镜可以用来提高图像的视觉清晰度和边缘细节&#xff0c;同时最大限度地减少常见的锐化问题如噪点和光晕等。 “智能锐化”滤镜通过自适应算法分析图像内容&#xff0c;针对不同的细…

省级财政收入、支出、第一、二、三产业增加值、工业增加值、金融业增加值占GDP比重数据(1978-2022年)

01、数据介绍 财政收支作为国家治理的基础&#xff0c;越来越受到社会各界的关注。同时&#xff0c;产业结构的优化与升级也是中国经济持续增长的关键因素。本数据对中国省级财政收入、支出占GDP的比重以及第一、二、三产业的增加值占GDP的比重和工业增加值占GDP的比重、金融业…