【Vue】computed与watch

       📝个人主页:五敷有你      
 🔥系列专栏:Vue
⛺️稳重求进,晒太阳

计算属性

概念:基于现有的数据,计算出来新的属性,依赖的数据变化,自动重新计算

语法:

  1. 声明在computed配置项中,一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用{{计算属性名}}

计算属性->可以将一段求值的代码进行封装

简写:

 computed:{fn(){return parseInt(this.a)+parseInt(this.b)+parseInt(this.c);}},

computed计算属性VSmethods方法

computed 计算属性

作用:封装了一段对于数据的处理,求得一个结果

语法:

  1. 写在computed配置项中
  2. 作为属性,直接使用->this.计算属性 {{计算属性}}

缓存特性:

  • 计算属性会对计算出来的结果缓存,再次使用直接读取缓存,
  • 依赖项变化了,会自动重新计算->并再次缓存

计算属性的完整写法:

       computed:{fullName:{get(){return this.firstName+this.lastName;},set(value){this.firstName=value.slice(0,1);this.lastName=value.slice(1);}}}

methods方法

作用:给实例提供一个方法,调用以处理业务逻辑

语法:

写在methods配置项中

作为方法,需要调用 -> this.方法名() {{方法名()}} @事件名="方法名"

watch

作用:监视数据变化,执行一些业务逻辑或异步操作

语法:

简单写法: 简单类型数据,直接监视

  watch:{"obj.words" (newValue,oldValue){console.log(newValue)}}

完整写法:添加额外的配置项

deep:true 对复杂类型进行深度监视

immediate:true 初始化立刻执行一次handler

                list:{deep:true,handler(newValue){localStorage.setItem("list",JSON.stringify(newValue))}}

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

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

相关文章

P1928 外星密码题解

题目 有了防护伞,并不能完全避免2012的灾难。地球防卫小队决定去求助外星种族的帮助。经过很长时间的努力,小队终于收到了外星生命的回信。但是外星人发过来的却是一串密码。只有解开密码,才能知道外星人给的准确回复。解开密码的第一道工序…

rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard

目录 快照 快照克隆 开机自动挂载 ceph文件系统 使用MDS 对象存储 配置服务器端 配置客户端 访问Dashborad 快照 快照可以保存某一时间点时的状态数据快照是映像在特定时间点的只读逻辑副本希望回到以前的一个状态,可以恢复快照使用镜像、快照综合示例 #…

Rust结构体详解:定义、使用及方法

Rust 是一门强调安全性和性能的系统级编程语言,它引入了结构体(struct)作为一种自定义的数据类型,允许程序员以更加灵活的方式组织和操作数据。在本篇博客中,我们将深入探讨 Rust 结构体的定义、使用以及相关概念。 什…

《SQLi-Labs》05. Less 29~37

title: 《SQLi-Labs》05. Less 29~37 date: 2024-01-17 22:49:10 updated: 2024-02-12 18:09:10 categories: WriteUp:Security-Lab excerpt: HTTP 参数污染,联合注入、宽字节注入。 comments: false tags: top_image: /images/backimg/SunsetClimbing.p…

Python编程:17个提升工作效率的自动化脚本

您是否厌倦了在日常工作中做那些重复性的任务?简单但多功能的Python脚本可以解决您的问题。 本篇文章将为您介绍17个能够自动执行各种任务并提高工作效率Python脚本及其代码。无论您是开发人员、数据分析师,还是只是希望简化工作流程的人,这…

n节点的无序标号树有多少种:拉格朗日反演的应用

摘要: 拉格朗日反演的应用 【对算法,数学,计算机感兴趣的同学,欢迎关注我哈,阅读更多原创文章】 我的网站:潮汐朝夕的生活实验室 我的公众号:算法题刷刷 我的知乎:潮汐朝夕 我的github&#xff…

【leetcode】100. 相同的树

题目链接 100. 相同的树 bool isSameTree(struct TreeNode* p, struct TreeNode* q) {if (p && q) {return p->val q->val // 分解&& isSameTree(p->left, q->left)&& isSameTree(p->right, q->right);} else if (p NULL &&…

Linux第50步_移植ST公司的linux内核第2步_编译ST公司的linux源码和修改网络驱动

1、修改“linux-5.4.31”目录下的“Makefile” 1)、使用VSCode打开“linux-5.4.31.code-workspace” 2)、点击“linux-5.4.31”目录下的“Makefile” 3)、点击“编辑”,点击“查找”,输入“CROSS_COMPILE回车”,找到“ARCH ? $(SUBARCH)”…

回归预测模型:MATLAB岭回归和Lasso回归

1. 岭回归和Lasso回归的基本原理 1.1 岭回归: 岭回归(Ridge Regression) 是一种用于共线性数据分析的技术。共线性指的是自变量之间存在高度相关关系。岭回归通过在损失函数中添加一个L2正则项( λ ∑ j 1 n β j 2 \lambda \s…

JavaWeb:关于登录认证的简单拓展

前提介绍 本文基于文章-------JavaWeb:SpringBootWeb登录认证 --黑马笔记 -------再做简单拓展 如果没有关于登录认证知识的基础,可以先看上面所说的的文章,文章在专栏javaweb中,下面我为了大家观看,直接放了链接。…

2024年华为OD机试真题-堆内存申请-Python-OD统一考试(C卷)

题目描述: 有一个总空间为100字节的堆,现要从中新申请一块内存,内存分配原则为优先紧接着前一块已使用内存分配空间足够且最接近申请大小的空闲内存。 输入描述: 输入: 第1行是1个整数,表示期望申请的内存字节数; 第2到N行是用空格分割的两个整数,表示当前已分配的内存…

26. 可变参数和Collection集合工具类

可变参数与Collections 1. 可变参数1. 概述2. 格式3. 代码示例4. 注意事项 2. Collections集合工具类2.1 概述2.2 方法2.3 代码示例2.4 注意事项 1. 可变参数 1. 概述 可变参数(Variable Arguments)是指在参数列表中允许传入不定个数的参数。在许多编程…

《动手学深度学习(PyTorch版)》笔记7.6

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

如何在CentOS7上使用防火墙保护Docker容器的端口

防火墙设置对Docker容器内开放的端口无效? 在主机或虚机上运行Docker容器时,即便主机启用了firewalld服务,仍然存在一些安全隐患,尤其是当Docker容器内打开端口并监听0.0.0.0时,存在即使通过firewall-cmd配置了阻止某…

前端主流框架:项目运行命令 npm 详解

作为一位资深前端开发,我对npm(Node Package Manager)的使用有着深入的了解。npm是Node.js的包管理器,用于安装、管理和删除各种前端库和工具。现在,让我们深入了解npm在Vue、React、Angular和Vue 3项目中的一些基本使…

【软件工程导论】实验二——编制数据字典(数字化校园系统案例分析)

数字化校园系统案例分析 问题定义实验内容编制内容1数据项数据流处理逻辑数据存储 2外部实体 问题定义 数字化校园系统期望以数字化信息和网络为基础,在计算机和网络技术上建立起对教学、科研、管理、技术服务、生活服务等校园信息的收集、处理、整合、存储、传输和…

嵌入式Qt 第一个Qt项目

一.创建Qt项目 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框,选择Qt Widgets Application 选择【Choose】按钮,弹出如下对话框 设置项目名称和路径,按照向导进行下一步 选…

EMC学习笔记(二十六)降低EMI的PCB设计指南(六)

降低EMI的PCB设计指南(六) 1.PCB布局1.1 带键盘和显示器的前置面板PCB在汽车和消费类应用中的应用1.2 敏感元器件的布局1.3 自动布线器 2.屏蔽2.1 工作原理2.2 屏蔽接地2.3 电缆屏蔽至旁路2.4 缝隙天线:冷却槽和缝隙 tips:资料主要…

MySQL篇----第二十一篇

系列文章目录 文章目录 系列文章目录前言一、什么是乐观锁二、什么是悲观锁三、什么是时间戳四、什么是行级锁前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、…