VUE的计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>计算属性</title>
</head>
<style>
table {
border: 1px solid #000;
text-align: center;
width: 240px;
}
th,td {
border: 1px solid #000;
}
h3 {
position: relative;
}
</style>
<body>
<!-- 计算属性
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
1.声明在computed配置项中，一个计算属性对应一个函数。
2.使用起来和普通属性一样使用{{计算属性名}}
computed 计算属性 和 methods方法区别
computed计算属性：
作用：封装了一段对于数据的处理，求得一个结果
语法：写在computed配置项中，作为属性直接使用，this.计算属性{{计算属性}}
重点：
缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会重新计算并再次缓存
计算属性的完整写法
计算属性默认的简写，只能读取访问，不能'修改'，如果要'修改'，需要写计算属性的完整写法
默认写法：
computed:{
计算属性名(){
一段代码逻辑（计算逻辑）
return 结果
}
}
完整写法：获取+设置
computed:{
计算属性名:{
get(){
一段代码逻辑（计算逻辑）
return 结果
},
//当计算属性名被修改赋值时，会执行set
set(修改的值){
一段代码逻辑（修改逻辑）
}
}
}
methods方法：
作用：给实例提供一个方法，调用以处理业务逻辑
语法：写在methods配置项中，作为方法，需要调用，this.方法名（）{{ 方法名（）}} @事件名='方法名'
-->
<div id="app">
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in list" :key='item.id'>
<td>{{item.name}}</td>
<td>{{item.num}}</td>
</tr>
</table>
<p>礼物总数：{{ totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'篮球',num:'1'},
{id:2,name:'足球',num:'3'},
{id:3,name:'网球',num:'5'},
]
},
computed:{
// 计算属性有缓存的，一旦计算出来结果，就会立即缓存
// 下一次读取，直接读缓存就行，性能高
totalCount(){
// 基于现有的数据，编写求值逻辑
// 计算属性函数内部，可以直接通过 this 访问到app实例
// 需求：对 this.list 数组里面的 num进行求和，用reduce
// 0是一个起始值，起始时 0是sum item.num是1，然后依次把数组里面的累加
let total = this.list.reduce((sum,item) => sum + item.num,0)
return total
// let是块作用域，在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
// 而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的
}
}
})
</script>
</body>
</html>
相关文章：
VUE的计算属性
<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>计算属性</title> </head> <style> table { border: 1px solid #000; text-align: center; width: 240px; } th,td { border: 1px solid #000; …...
uniapp中使用pageScrollTo让页面滚动到固定节点或距离
uniapp中使用pageScrollTo让页面滚动到固定节点或距离 思路：计算当前节点距离顶部的距离滚动距离然后使用pageScrollTo进行滚动（要保证页面加载完成之后在执行） #topic" id ：页面的节点 changeTop(id) {let query uni.c…...
使用机器学习方法进行分析和处理：对高质量图像进行压缩
使用SVD（奇异值分解）进行图像压缩与普通压缩工具压缩的主要区别在于压缩原理和压缩效果。 压缩原理： 普通图像压缩工具通常采用有损压缩或无损压缩算法，如JPEG、PNG等，它们主要针对图像的像素进行变换和编码。而SVD图像…...
多线程面试总结
1. 创建线程有哪几种方式 创建线程有三种方式，分别是继承Thread类、实现Runnable接口、实现Callable接口。 通过继承Thread类来创建并启动线程的步骤如下： 定义Thread类的子类，并重写该类的run()方法，该run()方法将作为线程执行…...
android11-隐藏状态栏和导航栏
隐藏导航栏 /android11/frameworks/base/packages/SystemUI/res/layout/navigation_bar.xml diff --git a/frameworks/base/packages/SystemUI/res/layout/navigation_bar.xml b/frameworks/base/packages/SystemUI/res/layout/navigation_bar.xml index ba6b6956f1..6db2348…...
血的教训--kail系统免密centos7的坑【高版本ssh免密低版本ssh的坑】
血的教训–kail系统免密centos7的坑【高版本ssh免密低版本ssh的坑】 最近下载了一个2023版本的kail系统，但是经过几次设置免密后，ssh过去一直让提供密码，所以就仔细的分析了一下，果然还是发现了点猫腻 接上一个博客，大…...
javaagent字节码增强浅尝
概述 javaagent 技术广泛应用于对代码的增强，比如统计方法执行时间、GC 信息打印、分布式链路跟踪等；实现方式包括 javassist 和 bytebuddy，bytebuddy 是对 javassist 的改进；类似于 spring 中的 AOP； Instrumentati…...
计算机组成原理-Cache替换算法
文章目录 总览随机算法（RAND）先进先出算法（FIFO）近期最少使用算法（LRU）最不经常使用算法（LFU）总结 总览 随机算法（RAND） 没有选择性地考虑替换哪一块Cache&a…...
Adobe 家族系列download
adobe 前言 Adobe公司的产品线中拥有多个家族桶，下面是Adobe全家桶产品的功能介绍： Creative Cloud（创意云）：包含Photoshop、Illustrator、InDesign、Premiere Pro、After Effects、Lightroom等创意设计、视频制作和…...
97.STL-查找算法 find
目录 STL-查找算法find 1.基本用法： 2.查找自定义类型： 3.查找范围： STL-查找算法find 在C的STL（标准模板库）中，find 算法用于在指定范围内查找指定值的元素。 功能描述： 查找指定元素&…...
如何应对雨天飞行的挑战？无人机机库防护能力解析
一、 背景介绍 无人机机库是无人机停放和起降场所，类似传统飞机的 hangar（飞机库）。它是一个专门用于存储、维护和保护无人机的设施。无人机机库的存在有助于提高无人机的安全性，同时也为无人机提供了一个有序的管理场所。 雨天…...
机器学习笔记 - 3D数据的常见表示方式
一、简述 从单一角度而自动合成3D数据是人类视觉和大脑的基本功能，这对计算机视觉算法来说是比较难的。但随着LiDAR、RGB-D 相机（RealSense、Kinect）和3D扫描仪等3D传感器的普及和价格的降低，3D 采集技术的最新进展取得了巨大飞跃。与广泛使用的 2D 数据不同，3D 数据具有丰…...
【Node.js】解决npm报错：RequestError: unable to verify the first certificate
1. 问题简述 帖主从nodejs官网下载安装nodejs后，发现使用以下命令安装electron会报错： npm install electron 报错信息如下： npm ERR! RequestError: unable to verify the first certificate 2. 解决方案 网上列举的方案，无…...
语言模型文本处理基石：Tokenizer简明概述
编者按：近年来，人工智能技术飞速发展，尤其是大型语言模型的问世，让 AI 写作、聊天等能力有了质的飞跃。如何更好地理解和利用这些生成式 AI，成为许多开发者和用户关心的问题。 今天，我们推出的这篇文章有助…...
淘宝商品详情数据接口（店铺搬家、数据分析、代购商城、ERP选品、无货源铺货、品牌监控）
使用淘宝API接口需要以下步骤： 注册开发者账号：在淘宝开放平台（https://o0b.cn/anzexi）上注册一个开发者账号，并创建一个应用。 获取API密钥：在应用页面上获取API密钥，这是后续调用API接口的凭…...
面试篇之微服务（一）
目录 概览 1.什么是微服务？ 2.微服务带来了哪些挑战？ 3.现在有哪些流行的微服务解决方案？ 这三种方案有什么区别吗？ 4.说下微服务有哪些组件？ 注册中心 5.注册中心是用来干什么的？ 6.SpringCloud可…...
智慧科研助力科研数据的分析处理
如今，科研领域的发展日新月异，数据量也越来越大。这时，智慧科研可视化技术不仅为科研人员提供了快速高效的数据分析手段，而且为科研工作的推进提供了新的思路和方法。通过可视化手段，我们可以将各种数据、信息、知识以…...
el-select实现分屏效果
动态绑定class值 ，多种判断 :class"type 8 ? home-stye-2 : type 24 ? home-stye-1 : home-stye-3" <div class"home-right-top"><div class"home-right-top-video"><el-row :gutter"20"><el-c…...
微信小程序本地和真机调试文件上传成功但体验版不成功
可能是微信小程序ip白名单的问题，去微信公众平台（小程序）上设置小程序的ip白名单 1、在本地中取消不校验 然后在本地去上传文件，就会发现控制台报错了，会提示一个https什么不在ip白名单，复制那个网址 2、…...
windows系统用nginx部署web应用
要在Windows系统上使用Nginx进行本地部署和运行Web应用程序，可以按照以下步骤进行操作： 1.首先下载nginx，需要去nginx官网： nginx: download 下载最新版本的： 2.解压缩Nginx：找个磁盘位置，新…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
DBLP数据库是什么？
DBLP（Digital Bibliography & Library Project）Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高，数据库文献更新速度很快，很好地反映了国际计算机科学学术研…...
Canal环境搭建并实现和ES数据同步
作者：田超凡 日期：2025年6月7日 Canal安装，启动端口11111、8082： 安装canal-deployer服务端： https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...
工厂方法模式和抽象工厂方法模式的battle
1.案例直接上手 在这个案例里面，我们会实现这个普通的工厂方法，并且对比这个普通工厂方法和我们直接创建对象的差别在哪里，为什么需要一个工厂： 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类： 两个发…...
【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space
问题：IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案：将编译的堆内存增加一点 位置：设置setting-》构建菜单build-》编译器Complier...
Linux中INADDR_ANY详解
在Linux网络编程中，INADDR_ANY 是一个特殊的IPv4地址常量（定义在 <netinet/in.h> 头文件中），用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法，允许套接字监听所有本地IP地址上的连接请求。 关…...
使用homeassistant 插件将tasmota 接入到米家
我写一个一个 将本地tasmoat的的设备同通过ha集成到小爱同学的功能，利用了巴法接入小爱的功能，将本地mqtt转发给巴法以实现小爱控制的功能，前提条件。1需要tasmota 设备， 2.在本地搭建了mqtt服务可， 3.搭建了ha 4.在h…...
timestamp时间戳转换工具
作为一名程序员，一款高效的 在线转换工具 （在线时间戳转换 计算器 字节单位转换 json格式化）必不可少！https://jsons.top 排查问题时非常痛的点: 经常在秒级、毫秒级、字符串格式的时间单位来回转换，于是决定手撸一个…...
【免杀】C2免杀技术（十五）shellcode混淆uuid/ipv6/mac
针对 shellcode 混淆（Shellcode Obfuscation） 的实战手段还有很多，如下表所示： 类型举例目的编码 / 加密XOR、AES、RC4、Base64、Poly1305、UUID、IP/MAC改变字节特征，避开静态签名或 YARA结构伪装PE Stub、GIF/PNG 嵌入、RTF OLE、UUID、IP/MAC看起来像合法文件/数据，弱…...
2025年上海市“星光计划”第十一届职业院校技能大赛 网络安全赛项技能操作模块样题
2025年上海市“星光计划”第十一届职业院校技能大赛 网络安全赛项技能操作模块样题 （二）模块 A：安全事件响应、网络安全数据取证、应用安全、系统安全任务一：漏洞扫描与利用:任务二：Windows 操作系统渗透测试 :任务三&…...