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

Vue中计算属性computed—(详解计算属性vs方法Methods，包括案例+代码)

news 2026/5/30 20:52:05

文章目录

  • 计算属性computed
    • 3.1 概述
    • 3.2 使用
    • 3.3 计算属性vs方法Methods
    • 3.4 计算属性的完整写法

计算属性computed

3.1 概述

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算

语法：

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

注意事项：

  • computed配置项和data配置项是同级的
  • computed中的计算属性虽然是函数的写法，但他依然是个属性
  • computed中的计算属性不能和data中的属性同名
  • 使用computed中的计算属性和使用data中的属性是一样的用法
  • computed中计算属性内部的this依然指向的是Vue实例
<script>const app = new Vue({el: '#app',data: {// 现有的数据},//computed和data同级computed: {totalCount () {}}</script>

3.2 使用

<style>table {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}
</style>
<body><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>
</body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{id: 1,name: '篮球',num: 1}, {id: 2,name: '玩具',num: 2}, {id: 3,name: '铅笔',num: 5}, ]},computed: {totalCount() {//基于现有的数据，编写求值逻辑//计算属性函数内部，可以直接通过 this 访问到 app 实例//console.log(this.list)//需求:对this.list数组里面的num进行求和→reducelet total = this.list.reduce((sum, item)=>sum+item.num,0)return total}}})
</script>

3.3 计算属性vs方法Methods

computed计算属性

  • 作用：封装了一段对于数据的处理，求得一个结果

  • 语法：

    1. 写在computed配置项中
    2. 作为属性，直接使用
      • js中使用计算属性： this.计算属性
      • 模板中使用计算属性：{{计算属性}}

methods计算属性

  • 作用：给Vue实例提供一个方法，调用以处理业务逻辑。

  • 语法：

    1. 写在methods配置项中
    2. 作为方法调用
      • js中调用：this.方法名()
      • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

计算属性的优势:

  • 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  • methods没有缓存特性

<style>table {border: 1px solid #000;text-align: center;width: 300px;}th, td {border: 1px solid #000;}h3 {position: relative;}
</style>
<body><div id="app"><h3>666666<span>{{ totalCountFn() }}</span></h3><h3>666666<span>{{ totalCountFn() }}</span></h3><h3>666666<span>{{ totalCountFn() }}</span></h3><h3>666666<span>{{ totalCountFn() }}</span></h3><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>礼物总数：{{ totalCountFn() }} 个</p><p>礼物总数：{{ totalCount}} 个</p></div>
</body>
<script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 3 }, { id: 2,name: '足球', num: 2 }, { id: 3, name: 'Java编程', num: 5 },]},methods: {totalCountFn() {console.log('methods方法执行了')//执行五次let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}},computed: {// 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高totalCount() {console.log('totalCount计算属性执行了')//执行1次let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})
</script>

3.4 计算属性的完整写法

  • 计算属性默认的简写，只能读取访问，不能 “修改”
  • 如果要 “修改” → 需要写计算属性的完整写法
<style>input {width: 30px;}
</style>
<body><div id="app">姓：<input type="text" v-model="firstName"> + 名：<input type="text" v-model="lastName"> =<span>{{fullName}}</span><button @click="changeName()">改名卡</button></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '李',lastName: '白',},methods: {changeName() {this.fullName = '你好'}},computed: {// 简写 → 获取，没有配置设置的逻辑// fullName () {//   return this.firstName + this.lastName// }// 完整写法 → get()获取 + set()设置fullName: {//(1)当fullName计算属性，被获取求值时，//执行get（有缓存，优先读缓存）//会将返回值作为，求值的结果get() {return this.firstName + this.lastName},//(2)当fullName计算属性，被修改赋值时，执行set//修改的值，传递给set方法的形参set(value) {//当点击执行changeName()方法后，//‘你好’会传给形参valuethis.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body>

相关文章：

Vue中计算属性computed—(详解计算属性vs方法Methods，包括案例+代码)

文章目录 计算属性computed3.1 概述3.2 使用3.3 计算属性vs方法Methods3.4 计算属性的完整写法 计算属性computed 3.1 概述 基于现有的数据&#xff0c;计算出来的新属性。 依赖的数据变化&#xff0c;自动重新计算 语法&#xff1a; 声明在 computed 配置项中&#xff0c;…...

编程日记 2024/10/23 4:17:07

Python程序设计 内置函数 日志模块

logging(日志) 日志记录是程序员工具箱中非常有用的工具。它可以帮助您更好地理解程序的流程&#xff0c;并发现您在开发过程中可能没有想到的场景。 日志为开发人员提供了额外的一组眼睛&#xff0c;这些眼睛不断关注应用程序正在经历的流程。它们可以存储信息&#xff0c;例…...

编程日记 2024/10/23 4:16:05

中标麒麟v5安装qt512.12开发软件

注意 需要联网操作 遇到问题1&#xff1a;yum提示没有可用软件包问题 终端执行如下命令 CentOS7将yum源更换为国内源保姆级教程 中标麒麟V7-yum源的更换&#xff08;阿里云源&#xff09; wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cento…...

编程日记 2024/10/23 4:15:04

每日算法一练：剑指offer——数组篇（3）

1.报数 实现一个十进制数字报数程序&#xff0c;请按照数字从小到大的顺序返回一个整数数列&#xff0c;该数列从数字 1 开始&#xff0c;到最大的正整数 cnt 位数字结束。 示例 1: 输入&#xff1a;cnt 2 输出&#xff1a;[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,1…...

编程日记 2024/10/23 4:14:03

Java代码说明设计模式

以下是使用 Java 代码分别说明设计模式中的工厂模式、抽象工厂模式&#xff08;这里推测你可能想说的是抽象工厂模式而非虚拟工厂模式&#xff09;、建造者模式和观察者模式。 一、工厂模式 工厂模式是一种创建对象的设计模式&#xff0c;它提供了一种创建对象的方式&#xf…...

编程日记 2024/10/23 4:13:03

Golang笔记_day06

一、GMP 调度器 1、调度器理解思路 理解golang的调度器要从进程到协程演进来说明&#xff1a; 进程--->线程--->协程---> golang的协程&#xff08;goroutine&#xff09; 从上图可以看出&#xff0c;进程到多线程到协程&#xff0c;最终目的就是为了提高CPU的利用率…...

编程日记 2024/10/23 4:12:02

「从零开始的 Vue 3 系列」：第十一章——跨域问题解决方案全解析

前言 本系列将从零开始&#xff0c;系统性地介绍 Vue 3 的常用 API&#xff0c;逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示&#xff0c;帮助大家掌握 Vue 3 的基础与进阶知识&#xff0c;最终具备独立搭建完整 Vue 3 项目的能力。 第十一章&#xff1a;跨域问…...

编程日记 2024/10/23 4:11:01

C语言结构体数组 java静动数组及问题

1. &#xff08;1&#xff09;先声明&#xff0c;后定义&#xff1a;如上一天 //&#xff08;2&#xff09;.声明时直接定义 #define N 5 typedef struct student { int num; int score; }STU; int main(void) { STU class3[N] { {10,90},{14,70},{8,95} }; …...

编程日记 2024/10/23 4:08:59

uniapp项目结构基本了解

基本结构的解释 App.vue&#xff1a;应用的根组件&#xff0c;定义全局布局和逻辑。pages/&#xff1a;存放各个页面的 .vue 文件&#xff0c;定义应用的具体页面和功能模块。main.js&#xff1a;应用入口文件&#xff0c;初始化应用&#xff0c;挂载 App.vue。manifest.json&…...

编程日记 2024/10/23 4:07:58

常见Web知识1

List item 常见Web知识1 JSON&#xff1a; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人类阅读和编写&#xff0c;同时也易于机器解析和生成。它通常用于客户端和服务器之间的数据传输。 JSON 结构 JSON 主要由两…...

编程日记 2024/10/23 4:06:55

新版idea菜单栏展开与合并

新版idea把菜单栏合并了看着很是不习惯&#xff0c;找了半天原来在这里展开 ① 点击文件 -> 设置 ② 点击外观与行为 -> 外观 -> 合并主菜单和窗口标题 然后确定&#xff0c;重启即可...

编程日记 2024/10/23 4:05:54

聊聊Go语言的异常处理机制

背景 最近因为遇到了一个panic问题&#xff0c;加上之前零零散散看了些关于程序异常处理相关的东西&#xff0c;对这块有点兴趣&#xff0c;于是整理了一下golang对于异常处理的机制。 名词介绍 Painc golang的内置方法&#xff0c;能够改变程序的控制流。 当函数调用了pan…...

编程日记 2024/10/23 4:02:51

复习：如何理解 React 中的 fiber

React 中的 Fiber 可以理解为 React 16 引入的一种新的协调（reconciliation）引擎，旨在提高 React 应用的性能和响应性。以下是对 React Fiber 的详细解释： 一、Fiber 的定义与背景 Fiber 是对 React 核心算法的一次重新实现，它将渲染工作分解成一系列小的任务单元，这些任…...

编程日记 2024/10/23 4:01:50

10分钟了解腾讯云混元大模型AIGC系列产品

前言 其实说到AIGC&#xff0c;作为开发者&#xff0c;大家其实已经见怪不怪了&#xff0c;那么AIGC是什么&#xff0c;这里我再简单科普一下。 AIGC的全称是Artificial Intelligence Generated Content &#xff08;人工智能生成内容&#xff09;或者说叫生成式人工智能&…...

编程日记 2024/10/23 4:00:49

Unity发送Http

本篇实现在Unity中发送Http请求。 讲解Get&#xff0c;Post&#xff0c;用于在Unity中进行数据对接。 一、Get IEnumerator Get() {string url "";//链接UnityWebRequest request UnityWebRequest.Get(url);//创建UnityWebRequest实例并设置请求方式为Getyield …...

编程日记 2024/10/23 3:57:45

微服务开发-Nacos服务治理

注册中心原理 流程如下&#xff1a; 服务启动时就会注册自己的服务信息&#xff08;服务名、IP、端口&#xff09;到注册中心&#xff1b;调用者可以从注册中心订阅想要的服务&#xff0c;获取服务对应的实例列表&#xff08;1个服务可能多实例部署&#xff09;&#xff1b;调…...

编程日记 2024/10/23 3:56:43

鸿蒙开发：两个重磅更新，鸿蒙版微信要来了！

从媒体消息中&#xff0c;其实我们已经知道&#xff0c;华为纯血鸿蒙系统&#xff08;HarmonyOS NEXT&#xff09;于10月8日正式开启了公测&#xff0c;对应的官方文档&#xff0c;大家可以看到已由原来的Beta版本更新到了Release&#xff0c;NEXT终于迎来了正式版本。 文档更新…...

编程日记 2024/10/23 3:52:37

es kibana .logstash离线集群安装

es离线集群安装 下载对应的版本一般看你客户端引用的是什么版本我这里下载的是7.6.2 官方下载地址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch 源码安装-环境准备&#xff1a;在etc/hosts文件添加3台主机 node-001 192.168.1.81 node-002 19…...

编程日记 2024/10/23 3:51:36

Java项目-基于springboot框架的基于协同过滤算法商品推荐系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…...

编程日记 2024/10/23 3:49:35

JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题解决

JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题解决 问题描述解决思路一解决思路二温馨提示 问题描述 JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题。 导出的excel部分列有数据&#xff0c;好几列没有数据 解决思路一 从网上百度查询&#xff0c;大多数的解决思路…...

编程日记 2024/10/23 3:45:31

适合地产人用的中介房源管理系统

在房产经纪行业&#xff0c;房源管理与客源管理是经纪人日常工作的核心&#xff0c;直接影响业务效率与成交转化。选择一套适配行业需求的中介房源管理系统&#xff0c;能帮助中介团队规范流程、降低运营成本、大幅提升业绩。今天我们以客观视角&#xff0c;详细解析全房源系统…...

编程新知 2026/5/26 1:57:14

警惕！AI正在悄悄重构全球攻防格局

警惕&#xff01;AI 正在悄悄重构全球攻防格局 热点聚焦 AI重构网络安全&#xff1a;全球巨头加速布局 2026年5月&#xff0c;全球网络安全领域迎来重大变革&#xff0c;AI技术正在重塑攻防格局。OpenAI发布专为网络安全防御打造的集成化AI平台Daybreak&#xff0c;将安全防…...

编程新知 2026/5/26 0:48:33

为什么软件开发偏爱 Linux？深度剖析 Linux 相较于 Windows 的核心优势

引言 在软件开发的世界里&#xff0c;一个有趣的现象是&#xff1a;无论是大型互联网公司的服务器集群&#xff0c;还是资深程序员的个人开发机&#xff0c;Linux 操作系统的身影无处不在。与之形成鲜明对比的是&#xff0c;尽管 Windows 在个人消费市场占据绝对主导地位&…...

编程新知 2026/5/26 0:24:13

别再手动编译了！Matlab一键调用CEC2017测试函数的完整配置指南（附30个函数调用示例）

别再手动编译了&#xff01;Matlab一键调用CEC2017测试函数的完整配置指南&#xff08;附30个函数调用示例&#xff09; 算法研究者们常常需要借助标准测试函数来验证优化算法的性能&#xff0c;而CEC2017测试函数集因其复杂性和多维度的挑战性&#xff0c;成为评估算法鲁棒性的…...

编程新知 2026/5/25 22:42:37

flameshow性能优化技巧：如何快速定位Go程序中的CPU热点

flameshow性能优化技巧&#xff1a;如何快速定位Go程序中的CPU热点 【免费下载链接】flameshow A terminal Flamegraph viewer. 项目地址: https://gitcode.com/gh_mirrors/fl/flameshow &#x1f525; 想要快速定位Go程序中的性能瓶颈吗&#xff1f;flameshow是一个强大…...

编程新知 2026/5/25 22:18:24

通过Taotoken实现Hermes Agent自定义模型供应商接入

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken实现Hermes Agent自定义模型供应商接入 Hermes Agent是一个流行的AI智能体开发框架&#xff0c;它支持通过配置自定义…...

编程新知 2026/5/25 20:20:05

2026论文顶级降AI率工具大曝光：一键把AIGC率降至安全线！

步入2026年&#xff0c;学术圈的规则已经彻底变了味。过去那种只盯着查重率的“降重焦虑”早就被更可怕的“降AI焦虑”取代了。AI检测算法越来越聪明&#xff0c;高校审核标准也越来越严苛&#xff0c;光是把重复率压下去已经完全不够用了。现在摆在学生和科研人员面前的难题是…...

编程新知 2026/5/25 19:55:26

PS5 NOR Modifier深度解析：如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版

PS5 NOR Modifier深度解析&#xff1a;如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版 【免费下载链接】PS5NorModifier The PS5 Nor Modifier is an easy to use Windows based application to rewrite your PS5 NOR file. This can be useful if your NOR is corru…...

编程新知 2026/5/25 18:32:45

3步快速部署：智能茅台抢购平台的终极自动化解决方案

3步快速部署&#xff1a;智能茅台抢购平台的终极自动化解决方案 【免费下载链接】campus-imaotai i茅台app自动预约&#xff0c;每日自动预约&#xff0c;支持docker一键部署&#xff08;本项目不提供成品&#xff0c;使用的是已淘汰的算法&#xff09; 项目地址: https://gi…...

编程新知 2026/5/25 18:10:10

通过TaotokenCLI工具一键配置开发环境接入参数

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken CLI工具一键配置开发环境接入参数 对于需要接入多个大模型服务的开发者而言&#xff0c;手动配置每个项目的API密钥、…...

编程新知 2026/5/25 18:06:04