【VUE复习·4】计算属性computed:原理、完整写法(不常用)、与 methods 的区别、简写(最常用)、应用案例!

总览

1.简介计算属性
2.computed 与 methods 的区别
3.computed 的简写(不修改计算属性,只显示)
4.经典应用场景

一、计算属性

1.为什么需要计算属性?

首先,如果我们要写一个插值语法,而 {{ }} 内的内容,是一个经过计算的值,那么按照原本 JS 的写法,应该是这样的:

在这里插入图片描述

但是在 VUE 中,不推荐这么写。这样看起来很乱。所以我们可以使用 methods 或者 computed 来实现,以降低耦合性:

在这里插入图片描述

2.具体案例

计算属性被称为“属性”,但它不被放在 data 中,而是有专门的地方存放:computed: {}。

有一个比较难以理解的点。一个计算属性并没有死数据,它只是一个容器,用于存放经过计算后的值。

我们能够理解,如果我们更改了计算属性(比如上面的 fullName)依赖的属性(比如上面的 firstName 和 LastName)那么计算属性自己也会发生改变(使用 get(){})这件事。

那如果我们直接修改计算属性呢?我们要如何让这种更改下发到计算属性依赖的基本属性上去?答案是使用 set(value){}。

在这里插入图片描述

如果我们直接更改 fullName,就会让这种变化 按照我们制定的规律下发到 组成 fullName 的基础属性上去。

在这里插入图片描述

二、computed 与 methods 的区别

1.效率方面

computed 内置了 缓存机制,让重复的值不会被重复计算,只被计算一次,就能够反复不经过再次计算直接调用。

2.调试方便

2.1 写在 method 中时,我们无法直接查看这个计算后的值是什么:

在这里插入图片描述

2.2 写在 computed 中时,我们能够直接在调试器上看到它:

在这里插入图片描述

三、computed 的简写(不修改计算属性,只显示)

1.简写示例

在这里插入图片描述

2.调用方式

我们直接使用即可:{{ fullName }}
而不需要再像使用 method 时那样写成函数的形式如 {{ fullName() }}


四、computed 应用案例1:值的映射

1.通过后端布尔值,前端匹配不同的值(不再需要将“是”、“否”这些中文放进数据库了)

在下面这个案例中,我们直接通过根据依赖 data 中布尔类型变量 isHot 的计算属性 info,将 data 中 isHot 的 “true” 和 “false” 映射为 computed 中 info 的 “凉爽” 和 “炎热”

在这里插入图片描述

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

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

相关文章

idea 如何在命令行快速打开项目

背景 在命令行中从git仓库检出项目,如何在该命令行下快速用idea 打开当前项目,类似vscode 可以通过在项目根目录下执行 code . 快速打开当前项目。 步骤 以macos 为例 vim /usr/local/bin/idea 输入如下内容 #!/bin/sh open -na "IntelliJ IDE…

华为OD机试 - 判断字符串子序列(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述1、输入2、输出3、说明 四、Java算法源码五、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷&am…

处理不平衡数据的十大 Python 库

数据不平衡是机器学习中一个常见的挑战,其中一个类的数量明显超过其他类,这可能导致有偏见的模型和较差的泛化。有各种Python库来帮助有效地处理不平衡数据。 在本文中,我们将介绍用于处理机器学习中不平衡数据的十大Python库,并…

使用ElementUI结合Vue完善主页的导航菜单和书籍管理的后台数据分页查询

目录 一、动态树 ( 1 ) 数据表 ( 2 ) 后端 ( 2 ) 前端 二、书籍管理 数据表 后端 前端 ElementUI的背景 是一套基于Vue.js的桌面端组件库,由饿了么前端团队开发维护。它提供了丰富的UI组件和交互效果,可以帮助开发者快速构建出美观、易用的We…

JDBC中setTransactionIsolation

在JDBC中,设置传播特性需要使用到 java.sql.Connection 接口中的 setTransactionIsolation(int level) 方法和 setAutoCommit(boolean autoCommit) 方法。 假设你有两个方法 method1() 和 method2(),它们都需要在不同的事务中运行。你可以将这些方法封装…

(三)Python变量类型和运算符

所有的编程语言都支持变量,Python 也不例外。变量是编程的起点,程序需要将数据存储到变量中。 变量在 Python 内部是有类型的,比如 int、float 等,但是我们在编程时无需关注变量类型,所有的变量都无需提前声明&#x…

Activiz 9.2 for Linux Crack

Activiz 9.2 在 C#、.Net 和 Unity 软件中为您的 3D 内容释放可视化工具包的强大功能。 ActiViz 允许您轻松地将 3D 可视化集成到您的应用程序中。 ActiViz 功能 用 C# 封装的 3D 可视化软件系统 允许在 .NET 环境中快速开发可投入生产的交互式3D 应用程序 支持窗口演示基础 (…

在Spring Boot项目中使用Redisson

在Spring Boot项目中使用Redisson Redisson简介 Redisson官网仓库 Redisson中文文档 Redission是一个基于Java的分布式缓存和分布式任务调度框架,用于处理分布式系统中的缓存和任务队列。它是一个开源项目,旨在简化分布式系统的开发和管理。 以下是…

Kafka:介绍和内部工作原理

展示Kafka工作方式的简单架构。 什么是Kafka?为什么我们要使用它?它是消息队列吗? •它是一个 分布式流处理平台或分布式 提交日志*。*•Kafka通常用于实时流数据管道,即在系统之间传输数据,构建不断流动的数据转换系统…

数据结构学习系列之链式栈

链式栈:即:栈的链式存储结构;分析:为了提高程序的运算效率,应采用头插法和头删法;进栈: int push_link_stack(stack_t *link_stack,int data) {if(NULL link_stack){printf("入参合理性检…

【GDB】 command 命令

GDB command 命令 语法 command 命令是一个很好用的调试命令,它配合断点使用,可以在指定的断点执行预先设置的命令 其语法为:command bread_id,这样会提示你输入你要执行的命令,以 end 结束。这个 bread_id 就是用 …

ElementUI之首页导航及左侧菜单(模拟实现)

目录 ​编辑 前言 一、mockjs简介 1. 什么是mockjs 2. mockjs的用途 3. 运用mockjs的优势 二、安装与配置mockjs 1. 安装mockjs 2. 引入mockjs 2.1 dev.env.js 2.2 prod.env.js 2.3 main.js 三、mockjs的使用 1. 将资源中的mock文件夹复制到src目录下 2. 点击登…

rust学习-any中的downcast和downcast_ref

背景 看rust官方文档,好奇Any和Go的Any是否是一回事,看到下文的一行代码,了解下它的功能 pub trait Any: static {// Required methodfn type_id(&self) -> TypeId; }std::any 用于 dynamic typing 或者 type reflection 模拟动态类型的trait。 大多数类型都实现 …

web前端tips:js继承——寄生式继承

上篇文章给大家分享了 js继承中的 原型式继承 web前端tips:js继承——原型式继承 今天给大家分享一下 js 继承中的 寄生式继承 寄生式继承 寄生式继承(Parasitic Inheritance)是一种基于原型式的继承方式,它通过创建一个仅用于…

聊聊wireshark的进阶使用功能 | 京东云技术团队

1. 前言 emmm,说起网络知识学习肯定离不来wireshark工具,这个工具能够帮助我们快速地定位网络问题以及帮助正在学习网络协议这块的知识的同学验证理论与实际的一大利器,平时更多的只是停留在初步的使用阶段。也是利用部门内部的网络兴趣小组…

使用YOLOv5的backbone网络识别图像天气 - P9

目录 环境步骤环境设置包引用声明一个全局的设备 数据准备收集数据集信息构建数据集在数据集中读取分类名称划分训练、测试数据集数据集划分批次 模型设计编写维持卷积前后图像大小不变的padding计算函数编写YOLOv5中使用的卷积模块编写YOLOv5中使用的Bottleneck模块编写YOLOv5…

maven中relativepath标签的含义

一 relative标签的含义 1.1 作用 这个<parent>下面的<relativePath>属性&#xff1a;parent的pom文件的路径。 relativePath 的作用是为了找到父级工程的pom.xml;因为子工程需要继承父工程的pom.xml文件中的内容。然后relativePath 标签内的值使用相对路径定位…

厦门大学《信号与系统》考试大纲

1.信号与系统概念 主要包括信号的定义及其分类&#xff1b;信号的运算&#xff1b;系统的定义及其划分&#xff1b;线性时不变系统的定义及特征等。 2.连续时间系统的时域分析 包括连续时间系统采用常系数微分方程的建立与求解&#xff1b;线性时不变系统通用微分方程模型&a…

Lua表实现类

--类 Student { name "Holens",age 1,sex true,Say1 function()print(Student.name.."说话了")end,Say2 function(t)print(t.name.."说话了2")end } Student.Say1() print("*************************************")--声明后添加…

【MATLAB第77期】基于MATLAB代理模型算法的降维/特征排序/数据处理回归/分类问题MATLAB代码实现【更新中】

【MATLAB第77期】基于MATLAB代理模型算法的降维/特征排序/数据处理回归/分类问题MATLAB代码实现 本文介绍基于libsvm代理模型算法的特征排序方法合集&#xff0c;包括&#xff1a; 1.基于每个特征预测精度进行排序&#xff08;libsvm代理模型&#xff09; 2.基于相关系数corr的…