vue-computed 计算属性

一、computed 计算属性

  • 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂 时,就会变得臃肿甚至难以维护和阅读,例如:

    <div>写在双括号中的表达式太长了,不利于阅读{{text.split(',').reverse().join(',')}}
    </div>

    将这段操作text.split(‘,’).reverse().join(‘,’) 放到计算属性中,最终返回一个结果值就可以

  • 作用

    减少运算次数, 缓存运算结果. 运用于重复相同的计算.

二、代码演示

1、传统方式

  1. 代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><p>{{add()}}</p></div></body><script src="js/vue.min.js"></script><script>var Vm = new Vue({el: "#app",data: {x: 1,y: 2,},methods: {add: function () {return this.x + this.y;},},});</script>
    </html>

2、computed 优化

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- <p>{{add()}}</p> --><p>{{add}}</p></div></body><script src="js/vue.min.js"></script><script>var Vm = new Vue({el: "#app",data: {x: 1,y: 2,},methods: {// add: function () {//   return this.x + this.y;// },},// 使用computed属性computed: {add: function () {return this.x + this.y;},},});</script>
    </html>
  2. 测试结果

    在这里插入图片描述

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

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

相关文章

Linux 入门基础知识(一)—— Linux的基本使用

Linux 入门基础知识 一、Linux的基本使用和配置1.1、终端1.2、消耗内存1.3、运行级别1.6、登录前欢迎语1.5、登录后欢迎语1.6、shell1.7、ps aux1.8、设置主机名1.9、whoami和who am i1.10、命令提示符 二、Linux执行命令的过程详解和命令类型2.1、命令执行2.2、hash缓存表2.3、…

张维迎《博弈与社会》纳什均衡与囚徒困境博弈(2)囚徒困境博弈

囚徒困境大家应该都比较熟悉了&#xff0c;我觉得这篇的意义大概在与&#xff0c;经济学术语的运用&#xff1f; 囚徒困境&#xff1a;个人理性与集体理性的矛盾 假定有两个犯罪嫌疑人共同作案。警察抓住他们以后&#xff0c;分开拘押&#xff0c;并告诉他们&#xff1a;可以选…

Chiplet,汽车“芯”风向

异构集成、高速互联、算力灵活可扩展正在成为新一轮汽车芯片竞争的焦点。尤其是随着以ChatGPT为代表的大数据、大模型产品在车端的落地&#xff0c;对于芯片的要求还在持续提升。 本周&#xff0c;12家日本汽车制造商&#xff08;包括丰田、日产、本田等&#xff09;、零部件制…

设计与实现基于Java+MySQL的考勤发布-签到系统

课题背景 随着现代经济的迅速发展&#xff0c;电子考勤签到服务已经渗透到人们生活的方方面面&#xff0c;成为不可或缺的一项服务。在这个背景下&#xff0c;线上签到作为考勤签到的一种创新形式&#xff0c;为用户提供了便捷的操作方式&#xff0c;使得任务签到、个人签到记…

代码随想录算法训练营第35天 | 860.柠檬水找零 406.根据身高重建队列 452.用最少数量的箭引爆气球

柠檬水找零 局部最优&#xff1a;收到20元时优先找零10元5元&#xff0c;不够再找零3个5元&#xff0c;因为5元可以找零20和10&#xff0c;更有用。全局最优&#xff1a;完成所有的找零。 class Solution { public:bool lemonadeChange(vector<int>& bills) {int fi…

c++的发展史、缺省参数、命名空间你了解吗?

1.c的发展历史概述 1.1.什么是c C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的 程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; 20世纪80年代&#xff0c; 计算机…

TypeScript实战系列之强力爆破泛型的困扰

目录 介绍开始如何理解泛型语法泛型约束泛型默认值练习后续 介绍 泛型在typescript 中使用频率相当高&#xff0c;也给了初学者相当大的阻碍。希望这一篇文章&#xff0c;能帮助你们爆破它。 开始 下面通过模拟实现一个简易版本的axios来引入泛型的使用 // axios.ts type M…

如何在centos7上配置为桥接模式

一、打开虚拟机的设置页面&#xff0c;设置虚拟机桥接模式如图&#xff1a;选择桥接模式&#xff08;复制物理网络连接可选&#xff09; 二、net0对应桥接模式的配置&#xff0c;如下方式选择 三、 在 CentOS 7 中&#xff0c;通过编辑网络配置文件来配置网络参数。找到 /etc…

(九)springboot实战——springboot3下的webflux项目参数验证及其全局参数验证异常处理

前言 在上一节内容中&#xff0c;我们介绍了如何在webflux项目中自定义实现一个全局的异常处理器ErrorWebExceptionHandler&#xff0c;正常情况下其可以处理我们系统的运行时异常&#xff0c;但是无法处理参数验证的异常WebExchangeBindException&#xff0c;所以这里提供另外…

算法随想录第四十八天打卡| 198.打家劫舍 , 213.打家劫舍II , 337.打家劫舍III

详细布置 今天就是打家劫舍的一天&#xff0c;这个系列不算难&#xff0c;大家可以一口气拿下。 198.打家劫舍 视频讲解&#xff1a;动态规划&#xff0c;偷不偷这个房间呢&#xff1f;| LeetCode&#xff1a;198.打家劫舍_哔哩哔哩_bilibili 代码随想录 class Solution(…

STM32 E18-D80NK红外避障传感器

E18-D80NK-N是一款红外光电传感器&#xff0c;它同时具备发射和接收功能。通过对发射光进行调制后发出&#xff0c;并通过接收头对反射光进行解调输出。 E18-D80NK-N采用了透镜来增强传感器的性能&#xff0c;使其能够检测更远的距离。根据红外光的特性&#xff0c;不同颜色的…

拒掉了一个双 985 的面试者

下班路上&#xff0c;和一个大佬聊天&#xff0c;他说今天面试&#xff0c;拒掉了一个双 985 的候选人。 候选人背景很好&#xff0c;本科和硕士都是 985 院校毕业&#xff0c;并且是除了清北浙之外&#xff0c;排名非常靠前的 985院校。 本硕专业都是计算机专业&#xff0c;…

Spring Boot + security + jwt 测试安全策略

一、测试概述 主要目的是测试security的用法。因测试搭建mysql和redis比较麻烦&#xff0c;所以我这里将自定义的jwt和用户信息缓存到程序的内存中。 本人测试的项目比较混乱&#xff0c;Spring Boot父类只标出有用的依赖。其子类用的版本为jdk11。后续会继续深入oauth2&#x…

数据库之TiDB基础讲解

文章目录 1 TiDB1.1 引言1.2 TiDB介绍1.3 系统架构1.3.1 TIDB Server1.3.2 PD Server1.3.3 TIKV Server1.3.4 TiKV如何不丢失数据1.3.5 分布式事务支持 1.4 与MySQL的对比1.5 性能测试1.5.1 测试一1.5.2 系统测试报告 2 1 TiDB 1.1 引言 当我们使用 Mysql 数据库到达一定量级…

调试小结:PHY初始化前后Link Status是否能正确反应网线插上、拔下状态

1 说明 为了验证是否需要初始化PHY才能检测到网线插上、拔下&#xff0c;这里我们对比初始化PHY&#xff08;LAN8720&#xff09;前后&#xff0c;插拔网线PHY寄存器1的bit2的是否按照预期变化来进行测试。 我们查看的PHY寄存器是1的bit2&#xff0c;定义如下&#xff1a; 2…

springboot的actuator

1、actuator简介 微服务的特点决定了功能模块的部署是分布式的&#xff0c;大部分功能模块都是运行在不同的机器上&#xff0c;彼此通过服务调用进行交互&#xff0c;前后台的业务流会经过很多个微服务的处理和传递&#xff0c;出现了异常如何快速定位是哪个环节出现了问题&am…

STM32 CAN接口中断处理与性能优化技巧

在基于STM32的CAN接口中&#xff0c;中断处理是一个非常重要的部分&#xff0c;它可以帮助我们实时地处理接收到的数据和处理其他CAN事件。为了优化CAN接口的性能&#xff0c;以下是一些中断处理和性能优化的技巧&#xff1a; ✅作者简介&#xff1a;热爱科研的嵌入式开发者&am…

系统架构19 - 面向对象

面向对象设计 相关概念面向对象分析基本步骤基本原则分析模型 面向对象设计设计模型类的类型 面向对象编程基本特点需求建模设计原则面向对象软件测试 相关概念 接口&#xff1a;描述对操作规范的说明&#xff0c;其只说明操作应该做什么&#xff0c;并没有定义操作如何做。消…

C与C++相互调用的“底层原理“

在你的C语言代码中&#xff0c;不知能否看到类似下面的代码&#xff1a; 这好像没有什么问题&#xff0c;你应该还会想&#xff1a;“嗯⋯是啊&#xff0c;我们的代码都是这样写的&#xff0c;从来没有因此碰到过什么麻烦啊&#xff5e;”。 你说的没错&#xff0c;如果你的头…

ES6理论及方法

一、基础知识 1.不可枚举就是不可遍历。 2.数据代理&#xff1a;通过一个对象代理对另一个对象中属性的操作&#xff08;读/写&#xff09; 二、方法 1.一个字符串是否包含在另一个字符串中 includes()&#xff1a;返回布尔值&#xff0c;表示是否找到了参数字符串。 starts…