[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: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      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.mfbz.cn/a/595500.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LoRa无线通讯入门

本文图片来自于深入浅出讲解LoRa通信技术&#xff0c;LoRa技术介绍&#xff0c;LoRa开发与应用&#xff0c;物联网学习必备知识点&#xff01;_哔哩哔哩_bilibili LoRa无线通讯 LoRa&#xff08;Long Range&#xff09;是一种低功耗广域网&#xff08;LPWAN&#xff09;技术&a…

【春招特供】Unity面试题总结 | Unity基础篇

物体发生碰撞的必要条件&#xff1f; 两个物体都必须带有碰撞器&#xff08;Collider&#xff09;&#xff0c;其中一个物体还必须带有Rigidbody刚体&#xff0c;而且必须是运动的物体带有Rigidbody脚本才能检测到碰撞。 2. Unity3d中的碰撞器和触发器的区别&#xff1f; 碰…

颠覆传统?「一束光子,两种频率」的量子纠缠!

在最新的研究中&#xff0c;科学家们开发了一种革命性的量子纠缠方式——“频域光子数路纠缠”&#xff08;frequency-domain photon number-path entanglement&#xff09;。这一量子物理学的重大进展涉及到一个创新性的工具&#xff1a;频率分束器&#xff08;frequency beam…

B2985A是德科技B2985A高阻计

181/2461/8938产品概述&#xff1a; B2985A 静电计/高阻表 描述 B2985A 静电计/高阻表是全球少有具有图形显示功能的静电计&#xff0c;可凭借 0.01 fA&#xff08;0.01 x 10-15 A&#xff09;的分辨率帮助您可靠测量弱电流&#xff0c;并可测量高达 10 PΩ&#xff08;10 x 1…

[leetcode] 62. 不同路径

文章目录 题目描述解题方法方法一&#xff1a;动态规划java代码复杂度分析 方法二&#xff1a;排列组合java代码复杂度分析 相似题目 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右…

毕业设计:《基于 Prometheus 和 ELK 的基础平台监控系统设计与实现》

前言 《基于 Prometheus 和 ELK 的基础平台监控系统设计与实现》&#xff0c;这是我在本科阶段的毕业设计&#xff0c;通过引入 Prometheus 和 ELK 架构实现企业对指标与日志的全方位监控。并且基于云原生&#xff0c;使用容器化持续集成部署的开发方式&#xff0c;通过 Sprin…

开源模型应用落地-CodeQwen模型小试-SQL专家测试(二)

一、前言 代码专家模型是基于人工智能的先进技术&#xff0c;它能够自动分析和理解大量的代码库&#xff0c;并从中学习常见的编码模式和最佳实践。这种模型可以提供准确而高效的代码建议&#xff0c;帮助开发人员在编写代码时避免常见的错误和陷阱。 通过学习代码专家模型&…

使用Bandzip分卷压缩文件

需求 部分文件太大&#xff0c;例如超过10G&#xff0c;就不能使用企业微信等传输&#xff0c;如果可以把一个10G的文件分割成为10个1G的文件就可以方便传输了。 实现方式 使用bandzip&#xff0c;把超过10G的文件分卷压缩成为多个小的zip文件。 把生成的多个文件放在同一目…

网红隋总揭秘:高效实施人力RPO项目的秘诀

随着企业对于招聘流程效率和专业性的追求日益提升&#xff0c;RPO(招聘流程外包)项目逐渐成为人力资源领域的热门话题。隋总凭借丰富的行业经验和独特的视角&#xff0c;分享了关于如何高效实施人力RPO项目的秘诀。 一、明确目标&#xff0c;找准定位 在启动RPO项目之前&#x…

零基础入门篇④ 初识Python(注释、编码规范、关键字...)

Python从入门到精通系列专栏面向零基础以及需要进阶的读者倾心打造,9.9元订阅即可享受付费专栏权益,一个专栏带你吃透Python,专栏分为零基础入门篇、模块篇、网络爬虫篇、Web开发篇、办公自动化篇、数据分析篇…学习不断,持续更新,火热订阅中🔥专栏订阅地址 👉Python从…

【挑战30天首通《谷粒商城》】-【第一天】01、简介-项目介绍

文章目录 课程介绍一、 项目介绍1、项目背景A、电商模式1、B2B 模式2、B2C 模式3、C2B 模式4、C2C 模式5、O2O 模式 1.2、项目架构图1.3、项目技术 & 特色1.4、项目前置要求二、分布式基础概念(略)三、环境撘建(略) one more thing 课程介绍 1.分布式基础(全栈开发篇)2.分…

UE5 audio capture 回声问题 ||在安卓上有爆鸣声

参考视频 0.基本步骤 【UE4_蓝图】录制麦克风声音/系统声音并输出保存WAV文件_ue4录音-CSDN博客 1.步骤 1.创建Sound Submix A 2. 右键新建Sound Submix B 3.把B的两个参数调为-96 4.audio capture的Base Submix&#xff0c;把前面提到的A赋值进去 5.开始录制输出和完成录制…

【Unity 协程】

Unity中的协程&#xff08;Coroutine&#xff09;是一种编程结构&#xff0c;它允许你以一种看似同步的方式编写可能需要异步执行的代码。协程特别适用于需要在一定时间后执行操作&#xff0c;或者在循环执行某段代码直到某个条件满足时的场景。 协程使用IEnumerator委托来实现…

30天精通 Δ-Σ ADC 设计

在现代电子工程和信号处理领域&#xff0c;模拟-数字转换器&#xff08;ADC&#xff09;是实现信号精确转换的核心组件。ADC技术正经历革新&#xff0c;拓展了其在多个前沿技术领域的应用范围。 **首先&#xff0c;**ADC的采样率和分辨率是衡量其性能的关键指标。随着技术工艺…

海外网安同行们面对当下的就业环境,也破防了。。。

问&#xff1a;漂亮国的安全行业就业市场怎么样&#xff1f; 答&#xff1a;初级岗位挺好找的&#xff0c;如果你有一个硕士学位并且还有10年工作经验的话。 0x00 我之前在分析海外的就业环境的时候[海外安全行业工资水平怎么样&#xff1f;]&#xff0c;一度以为外国的月亮就…

分布式光伏管理系统和一般的光伏管理系统相比有什么区别?

随着全球对可再生能源的关注度日益提高&#xff0c;光伏技术作为其中的佼佼者&#xff0c;已经得到了广泛的应用。在光伏技术中&#xff0c;管理系统扮演着至关重要的角色&#xff0c;它关乎着光伏电站的运行效率、能源产出以及运维成本等多个方面。其中&#xff0c;分布式光伏…

N9048B PXE EMI 测试接收机,1 Hz 至 44 GHz

​ _EMI_ N9048B EMI 测试接收机 1 Hz 至 44 GHz Keysight N9048B PXE 是一款符合标准的 EMI 测试接收机&#xff0c;配有射频预选器和 LNA 设计。其实时扫描&#xff08;RTS&#xff09;功能有助于您缩短总体测试时间&#xff0c;轻松执行无间隙的信号捕获和分析。 特点 …

前后端功能实现——添加品牌

需求 点击新增&#xff0c;跳转到添加品牌的页面&#xff0c;从后一个页面提交品牌数据&#xff1a; 1、BrandMapper接口添加add()方法 /** * 添加品牌 */ void add(Brand brand); 2、BrandMapper.xml中添加sql方法 <insert id"add">insert into brand val…

【字符串】Leetcode 最长回文子串

题目讲解 5. 最长回文子串 算法讲解 dp[i][j]表示i~j这一段区间的子串是否是回文 当s[i] s[j]的时候&#xff0c;此时是有三种情况的&#xff1a; ij说明一个字符肯定是回文 i1 j也说明一个字符是回文 i1 < j说明需要判断[i1, j-1]这一段区间是否是回文 此时我们就可以…

代码随想录算法训练营第十三天:树的认知(补五一)

代码随想录算法训练营第十三天&#xff1a;树的认知&#xff08;补五一&#xff09; ‍ 二叉树的递归遍历 #算法公开课 《代码随想录》算法视频公开课 ****(opens new window)****​ &#xff1a;​每次写递归都要靠直觉&#xff1f; 这次带你学透二叉树的递归遍历&#xf…