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

vue3 之 组合式API—computed

computed计算属性函数

计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法

核心步骤:

  1. 导入computed函数
  2. 执行函数 在回调参数中return基于响应式数据做计算的值,用变量接收

在这里插入图片描述
在这里插入图片描述

```vue
<script setup>
// 1.导入computed
import {ref, computed } from 'vue'
// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 2.执行函数return计算之后的值 变量接收
const computedList = computed(()=>{return list.value.filter(item=>item>2)
})setTimeout(()=>{list.value.push(9,10)
},3000)</script>
<template><div>原始响应式数组 —— {{list}}</div><div>计算属性数组 —— {{computedList}}</div>
</template>

相关文章:

  • 代码随想录算法训练营第四十一天| 343. 整数拆分、96.不同的二叉搜索树
  • 忘记 RAG:拥抱Agent设计,让 ChatGPT 更智能更贴近实际
  • 【多模态大模型】视觉大模型SAM:如何使模型能够处理任意图像的分割任务?
  • LeAPI 后端接口开发 - 发布、下线接口
  • 导出pdf 加密、加水印、加页脚
  • 计组学习笔记2024/2/5
  • 框架学习Maven
  • Gson源码解读
  • 自动化报告pptx-python|高效通过PPT模版制造报告(三)
  • Jupyter Notebook中的%matplotlib inline详解
  • A系统数据表同步到B系统数据表
  • 2.6作业
  • Java持久化机制和实现的过程
  • 电商推荐系统
  • LabVIEW高精度微小电容测量
  • [LeetCode] Wiggle Sort
  • C学习-枚举(九)
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • js继承的实现方法
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • Kibana配置logstash,报表一体化
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • React+TypeScript入门
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • Vue全家桶实现一个Web App
  • webpack入门学习手记(二)
  • windows下如何用phpstorm同步测试服务器
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 聊聊hikari连接池的leakDetectionThreshold
  • 你真的知道 == 和 equals 的区别吗?
  • 如何在 Tornado 中实现 Middleware
  • 使用iElevator.js模拟segmentfault的文章标题导航
  • 算法---两个栈实现一个队列
  • 小而合理的前端理论:rscss和rsjs
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • (12)Hive调优——count distinct去重优化
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (独孤九剑)--文件系统
  • (十) 初识 Docker file
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (转) ns2/nam与nam实现相关的文件
  • (转)jQuery 基础
  • .Net 4.0并行库实用性演练
  • .Net Core与存储过程(一)
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .net 后台导出excel ,word
  • .Net 路由处理厉害了
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地定义和使用弱事件
  • .net6Api后台+uniapp导出Excel
  • /etc/sudoers (root权限管理)