当前位置: 首页 > news >正文

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 又被称作计算属性&#xff0c;用于动态的根据某个值或某些值的变化&#xff0c;来产生对应的变化&#xff0c;computed 具有缓存性&#xff0c;当无关值变化时&#xff0c;不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。 vue3 中 的 com…...

常见的三种锁

一、互斥锁 互斥锁 Mutex 保证在任意时刻只有一个线程能够进入被保护的临界区。当一个线程获取到互斥锁后&#xff0c;其他线程若要进入临界区就会被阻塞&#xff0c;直到该线程释放锁。 互斥锁是一种阻塞锁&#xff0c;当线程无法获取到锁时&#xff0c;会进入阻塞状态。 应…...

离线文本转语音库pyttsx3(目前接触到的声音效果最好的,基本上拿来就能用)

在现代应用程序中&#xff0c;文本转语音&#xff08;Text-to-Speech, TTS&#xff09;技术越来越受到重视。无论是为视力障碍人士提供帮助&#xff0c;还是为教育和娱乐应用增添趣味&#xff0c;TTS 都能发挥重要作用。今天&#xff0c;我们将介绍一个简单易用的 Python 库——…...

LeetCode Hot100刷题——反转链表(迭代+递归)

206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#…...

JJJ:linux sysfs相关

文章目录 1.sysfs&#xff08;属性&#xff09;文件的创建、读、写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&#xff08;属性&#xff09;文件的创建、读、写 1…...

Leetcode 刷题记录 06 —— 矩阵

本系列为笔者的 Leetcode 刷题记录&#xff0c;顺序为 Hot 100 题官方顺序&#xff0c;根据标签命名&#xff0c;记录笔者总结的做题思路&#xff0c;附部分代码解释和疑问解答。 目录 01 矩阵置零 方法一&#xff1a;标记数组 方法二&#xff1a;两个标记变量 02 螺旋矩阵…...

什么样的物联网框架适合开展共享自助KTV唱歌项目?

现在物联网的广泛应用&#xff0c;也让更多用户们看到了它的实力&#xff0c;也使得共享经济遍地开花。其中共享自助唱歌设备也备受欢迎&#xff0c;那么适合开展共享自助KTV唱歌项目的物联网框架都应具备哪些特点呢&#xff1f; 智能化与自动化管理 物联网技术在共享KTV中的应…...

【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks

HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头&#xff1f;2. 什么是 HTTP Host 标头攻击&#xff1f;3. HTTP Host 标头漏洞是如何产生的&#xff1f;4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...

Web基础:HTML快速入门

HTML基础语法 HTML&#xff08;超文本标记语言&#xff09; 是用于创建网页内容的 标记语言&#xff0c;通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本&#xff08;Hypertext&#xff09; 是一种通过 链接&#xff08;Hyperlinks&#xff09; 将不同文本、图像…...

技术领域,有许多优秀的博客和网站

在技术领域&#xff0c;有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站&#xff0c;涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域&#xff1a; 1. 综合技术博客 1.1 Medium 网址: ht…...

k8s概念及k8s集群部署(Centos7)

Centos7部署k8s集群 部署之前&#xff0c;先简单说下k8s是个啥&#xff1a; 一、k8s简介&#xff1a; k8s&#xff0c;全称&#xff1a;kubernetes&#xff0c;它可以看作是一个分布式系统支撑平台。k8s的作用&#xff1a; 1、故障自愈&#xff1a; k8s这个玩意可以监控容器…...

《DeepSeek-V3:动态温度调节算法,开启推理新境界!》

在人工智能领域不断探索的征程中&#xff0c;DeepSeek-V3以其卓越的创新技术&#xff0c;尤其是动态温度调节算法&#xff0c;成为了备受瞩目的焦点。这项算法犹如一把神奇的钥匙&#xff0c;巧妙地开启了推理速度与精度动态平衡的大门&#xff0c;为大语言模型的发展开辟了新的…...

Python从入门到精通1:FastAPI

引言 在现代 Web 开发中&#xff0c;API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能&#xff0c;成为 Python 开发者的首选框架。本文将从零开始&#xff0c;详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...

fastapi+angular停车管理系统可跨域

说明&#xff1a; 我计划用fastapiangular做一款停车管理系统&#xff0c;支持跨域 1.设计mysql数据库表&#xff0c; 2.建表&#xff0c;添加测试数据&#xff0c;多表查询&#xff0c; 3.在fastapi写接口查询数据&#xff0c; 4.用postman测试&#xff0c; 5.在angular前端展…...

前端题目类型

HTMLCSS常见面试题 HTML标签有哪些行内元素 img、picture、span、input、textarea、select、label 说说你对元素语义化的理解 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果&#xff0c;但这样会使事情复杂化&#xff0c;所以需…...

openwrt路由系统------lua、uci的关系

1. Luci 的核心组成 (1) Lua 简介:Luci 的界面和逻辑几乎完全使用 Lua 脚本语言编写。Lua 是一种轻量级、高效的嵌入式脚本语言,适合在资源受限的路由器环境中运行。作用: 生成动态 Web 页面(与后端交互渲染 HTML)。处理用户提交的表单数据(如修改 Wi-Fi 密码)。调用系…...

Elastic:AI 会开始取代网络安全工作吗?

作者&#xff1a;来自 Elastic Joe DeFever 不会&#xff0c;但它正在从根本上改变这些工作。 生成式 AI (GenAI) 正迅速成为日常安全工作流程中的一个重要组成部分。那么&#xff0c;它是合作伙伴还是竞争对手&#xff1f; 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模型报错问题&#xff08;已解决&#xff09; 前言问题现象问题分析解决方案总结 前言 这里使用的是Rockchip提供的rknn_model_zoo&#xff0c;https://github.com/airockchip/rknn_model_zoo/tree/main 此解决方案适用于Rockchip芯片在U…...

国产算力助力工业智能新范式

随着人工智能、智能制造以及边缘计算等技术趋势的发展&#xff0c;算力设备正逐渐从中心云向边缘机房乃至边缘现场下沉。在此背景下&#xff0c;以工控机为例的部署于各类边缘现场的算力设备市场&#xff0c;也正面临着新的变革。 根据IDC 2024研究报告显示&#xff1a;在能源制…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...