Vue3 中 Computed 用法
Computed 又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed 具有缓存性,当无关值变化时,不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式 API,所以可以直接使用 vue2 的写法,以下是 vue3 中 computed 的写法和 vue2 中的写法的对比。
组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue"。 引入之后 computed 可以传入的参数有两种: 回调函数和 options 。 具体使用
一、函数式写法
在 vue2 中,computed 写法:
computed:{ sum(){ return this.num1+ this.num2 }
}
在 vue3 如果使用选项式 API 也可以这样写,主要看下组合式 API 的使用。
示例 1:求和
import { ref, computed } from "vue"export default { setup(){ const num1 = ref(1) const num2 = ref(1) let sum = computed(()=>{ return num1.value + num2.value }) }
}
调用 computed 时, 传入了一个箭头函数,返回值作为 sum 。相比之前,使用更加简单了。如果需要计算多个属性值,直接调用就可以。如:
let sum = computed(()=>{return num1.value + num2.value
})
let mul = computed(()=>{ return num1.value * num2.value
})
二、options 写法
计算属性默认只有 getter ,在需要的时候也可以提供 setter 。在 vue2 中用法如下:
computed:{ mul:{ get(){ // num1 值改变时触发 return this.num1 * 10 }, set(value){ // mul 值被改变时触发 this.num1 = value /10 } }
}
mul 属性是给 num1 放大 10,如果修改 mul 的值,则 num1 也随之改变。
在 vue3 中 :
let mul = computed({ get:()=>{ return num1.value *10 }, set:(value)=>{ num1.value = value/10 }
})
这两种写法不太一样,仔细观察区别不大,get 和 set 调用也是一样的。
三、computed 传参
计算属性需要传入一个参数怎么写呢?
<template> <div> <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)"> {{item}} </div></div>
</template>
<script>
import { ref, computed,reactive } from "vue"export default{ setup(){ const arr = reactive([ '哈哈','嘿嘿' ]) const sltEle = computed( (index)=>{ console.log('index',index); }) return{ arr,sltEle }}
}
</script>
直接这样写,运行的时候,出现错误:Uncaught TypeError: $setup.sltEle is not a function。
原因:
computed 计算属性并没有给定返回值,我们调用的是一个函数,而 computed 内部返回的并不是一个函数,所以就会报错:sltEle is not a function。
解决办法:
需要在计算属性 内部返回一个函数。修改代码如下:
const sltEle = computed(()=>{ return function(index) { console.log('index',index);}
}
相关文章:
Vue3 中 Computed 用法
Computed 又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed 具有缓存性,当无关值变化时,不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。 vue3 中 的 com…...
常见的三种锁
一、互斥锁 互斥锁 Mutex 保证在任意时刻只有一个线程能够进入被保护的临界区。当一个线程获取到互斥锁后,其他线程若要进入临界区就会被阻塞,直到该线程释放锁。 互斥锁是一种阻塞锁,当线程无法获取到锁时,会进入阻塞状态。 应…...
离线文本转语音库pyttsx3(目前接触到的声音效果最好的,基本上拿来就能用)
在现代应用程序中,文本转语音(Text-to-Speech, TTS)技术越来越受到重视。无论是为视力障碍人士提供帮助,还是为教育和娱乐应用增添趣味,TTS 都能发挥重要作用。今天,我们将介绍一个简单易用的 Python 库——…...
LeetCode Hot100刷题——反转链表(迭代+递归)
206.反转链表 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1]示例 2: 输入:head [1,2] 输出:[2,1]示例 3&#…...
JJJ:linux sysfs相关
文章目录 1.sysfs(属性)文件的创建、读、写1.1 创建流程1.2 open流程1.3 read流程 2.补充2.1 sysfs下常见目录介绍2.2 属性相关2.2.1 简介2.2.2 attribute文件的创建 2.3 sysfs目录如何创建的 1.sysfs(属性)文件的创建、读、写 1…...
Leetcode 刷题记录 06 —— 矩阵
本系列为笔者的 Leetcode 刷题记录,顺序为 Hot 100 题官方顺序,根据标签命名,记录笔者总结的做题思路,附部分代码解释和疑问解答。 目录 01 矩阵置零 方法一:标记数组 方法二:两个标记变量 02 螺旋矩阵…...
什么样的物联网框架适合开展共享自助KTV唱歌项目?
现在物联网的广泛应用,也让更多用户们看到了它的实力,也使得共享经济遍地开花。其中共享自助唱歌设备也备受欢迎,那么适合开展共享自助KTV唱歌项目的物联网框架都应具备哪些特点呢? 智能化与自动化管理 物联网技术在共享KTV中的应…...
【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks
HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头?2. 什么是 HTTP Host 标头攻击?3. HTTP Host 标头漏洞是如何产生的?4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...
Web基础:HTML快速入门
HTML基础语法 HTML(超文本标记语言) 是用于创建网页内容的 标记语言,通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本(Hypertext) 是一种通过 链接(Hyperlinks) 将不同文本、图像…...
技术领域,有许多优秀的博客和网站
在技术领域,有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站,涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域: 1. 综合技术博客 1.1 Medium 网址: ht…...
k8s概念及k8s集群部署(Centos7)
Centos7部署k8s集群 部署之前,先简单说下k8s是个啥: 一、k8s简介: k8s,全称:kubernetes,它可以看作是一个分布式系统支撑平台。k8s的作用: 1、故障自愈: k8s这个玩意可以监控容器…...
《DeepSeek-V3:动态温度调节算法,开启推理新境界!》
在人工智能领域不断探索的征程中,DeepSeek-V3以其卓越的创新技术,尤其是动态温度调节算法,成为了备受瞩目的焦点。这项算法犹如一把神奇的钥匙,巧妙地开启了推理速度与精度动态平衡的大门,为大语言模型的发展开辟了新的…...
Python从入门到精通1:FastAPI
引言 在现代 Web 开发中,API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能,成为 Python 开发者的首选框架。本文将从零开始,详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...
fastapi+angular停车管理系统可跨域
说明: 我计划用fastapiangular做一款停车管理系统,支持跨域 1.设计mysql数据库表, 2.建表,添加测试数据,多表查询, 3.在fastapi写接口查询数据, 4.用postman测试, 5.在angular前端展…...
前端题目类型
HTMLCSS常见面试题 HTML标签有哪些行内元素 img、picture、span、input、textarea、select、label 说说你对元素语义化的理解 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果,但这样会使事情复杂化,所以需…...
openwrt路由系统------lua、uci的关系
1. Luci 的核心组成 (1) Lua 简介:Luci 的界面和逻辑几乎完全使用 Lua 脚本语言编写。Lua 是一种轻量级、高效的嵌入式脚本语言,适合在资源受限的路由器环境中运行。作用: 生成动态 Web 页面(与后端交互渲染 HTML)。处理用户提交的表单数据(如修改 Wi-Fi 密码)。调用系…...
Elastic:AI 会开始取代网络安全工作吗?
作者:来自 Elastic Joe DeFever 不会,但它正在从根本上改变这些工作。 生成式 AI (GenAI) 正迅速成为日常安全工作流程中的一个重要组成部分。那么,它是合作伙伴还是竞争对手? GenAI 技术在安全堆栈几乎每个方面的广泛应用&#…...
Linux安装升级docker
Linux 安装升级docker Linux 安装升级docker背景升级停止docker服务备份原docker数据目录移除旧版本docker安装docker ce恢复数据目录启动docker参考 安装找到docker官网找到docker文档删除旧版本docker配置docker yum源参考官网继续安装docker设置开机自启配置加速测试 Linux …...
【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题(已解决)
【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题(已解决) 前言问题现象问题分析解决方案总结 前言 这里使用的是Rockchip提供的rknn_model_zoo,https://github.com/airockchip/rknn_model_zoo/tree/main 此解决方案适用于Rockchip芯片在U…...
国产算力助力工业智能新范式
随着人工智能、智能制造以及边缘计算等技术趋势的发展,算力设备正逐渐从中心云向边缘机房乃至边缘现场下沉。在此背景下,以工控机为例的部署于各类边缘现场的算力设备市场,也正面临着新的变革。 根据IDC 2024研究报告显示:在能源制…...
从漏极、栅极到源极开关:手把手教你选对单端电荷泵拓扑(基于噪声与速度权衡)
从漏极、栅极到源极开关:单端电荷泵拓扑的噪声与速度权衡实战指南 在锁相环(PLL)设计中,电荷泵的性能往往成为整个系统相位噪声和杂散特性的瓶颈。特别是当设计目标同时包含低带内相位噪声和高开关速度时,单端电荷泵的拓扑选择就变得尤为关键…...
手把手教你用STM32F405和SD卡,在阿里云物联网平台上实现OTA升级(MQTT协议详解)
STM32F405实战:基于SD卡与阿里云物联网平台的OTA升级全流程解析 当嵌入式设备部署在野外或工业现场时,固件升级往往成为工程师的噩梦。传统方式需要技术人员携带烧录器奔赴现场,不仅效率低下,在设备数量庞大或分布广泛时更是不切实…...
Java 从入门到精通(八):抽象类和接口到底怎么选?看懂之后,面向对象才算真的入门
Java 从入门到精通(八):抽象类和接口到底怎么选?看懂之后,面向对象才算真的入门 学到封装、继承、多态之后,很多人会有一种“好像差不多懂了”的感觉。 会定义类,会 new 对象,也知道…...
RS485接口EMC设计与防护电路实现
RS485接口电路的EMC设计与工程实现1. 项目概述1.1 RS485接口的EMC挑战RS485作为工业通信标准接口,其典型应用场景中信号走线常与电源线、功率信号线混合布线,导致以下EMC问题:共模干扰通过长距离传输线耦合浪涌脉冲对接口电路的冲击损坏高频噪…...
leetcode 困难题 1505. 最多 K 次交换相邻数位后得到的最小整数
Problem: 1505. 最多 K 次交换相邻数位后得到的最小整数 从左到右遍历字符串的每个索引,对每个索引i,向后查找k窗口内的最小数字,右边界是min(n, ik1),删去这个最小数字,然后将这个最小数字插入到当前索引,…...
Qwen2.5-7B-Instruct效果展示:农业病虫害图像描述→防治方案生成
Qwen2.5-7B-Instruct效果展示:农业病虫害图像描述→防治方案生成 想象一下,一位农民在田间地头,用手机拍下一片叶子上的异常斑点。几分钟后,他不仅得到了这是什么病害的准确诊断,还收到了一份详细的、可操作的防治方案…...
cutlass代码架构分析
CUTLASS 代码架构分析 本文档基于 cutlass代码进行梳理,快速理解 CUTLASS 4.x 的模块边界与调用链路。 1. 总体架构 CUTLASS 本质上是一个 header-only 的 CUDA C++ 模板库,外围配套了可选构建目标: include/:核心库(cutlass + cute) tools/:库实例化、性能测试与通用…...
PHP 数组 vs SPL 数据结构:队列与栈场景下的性能对决
PHP 数组 vs SPL 数据结构:队列与栈场景下的性能对决在 PHP 开发中,我们常常面临一个经典的选择:是使用灵活的原生数组(Array)模拟队列/栈,还是使用标准库(SPL)提供的 SplQueue 和 S…...
vLLM-v0.17.1在专利分析系统中的应用:权利要求生成与比对
vLLM-v0.17.1在专利分析系统中的应用:权利要求生成与比对 1. 技术背景与需求分析 专利分析是知识产权领域的重要工作,其中权利要求书的生成与比对是核心环节。传统方法依赖人工撰写和比对,效率低下且一致性难以保证。随着大语言模型技术的发…...
别再只盯着GPS了!从手机导航到无人机测绘,聊聊SPP、DGPS、RTK、PPP这几种定位技术到底该怎么选?
定位技术实战指南:从厘米级精度到全球覆盖的智能决策 站在一片待测绘的工地上,无人机工程师小王正面临一个关键抉择——该为这批新设备配置哪种定位模块?RTK的厘米级精度令人心动,但架设基准站的成本让他犹豫;PPP技术号…...
