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

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

news 2026/3/31 15:39:36

文章目录

  • 计算属性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

实战演练：在快马平台用codex生成一个完整的react用户管理组件

今天想和大家分享一个实战案例&#xff1a;如何在InsCode(快马)平台用Codex快速生成一个React用户管理组件。整个过程比我预想的顺畅很多&#xff0c;特别适合需要快速原型开发的场景。 项目需求拆解 用户管理是后台系统的标配功能&#xff0c;这次要实现三个核心模块&#xff…...

编程新知 2026/3/31 14:32:04

Windows 10/11下用StyleGAN2-ADA-PyTorch训练自己的数据集（避坑Visual Studio编译错误）

Windows平台StyleGAN2-ADA-PyTorch环境配置全指南&#xff1a;从编译错误到自动化训练 在Windows 10/11上配置StyleGAN2-ADA-PyTorch环境时&#xff0c;许多开发者都会遇到Visual Studio编译工具链缺失的经典问题。不同于Linux系统的开箱即用&#xff0c;Windows环境需要额外处…...

编程新知 2026/3/31 14:11:20

别再到处找了！这12个三维点云开源数据集，够你从入门到项目实战

三维点云实战指南&#xff1a;12个精选开源数据集与精准匹配策略 当你第一次打开三维点云处理软件&#xff0c;面对空白的项目界面&#xff0c;最迫切的问题往往是&#xff1a;"我该从哪里获取高质量的训练数据&#xff1f;"这个问题困扰过每一位初学者&#xff0c;…...

编程新知 2026/3/31 13:02:37

HarmonyOS 音乐播放器进阶实战——AVPlayer状态管理与播放列表

1. AVPlayer状态机深度解析 在HarmonyOS音乐播放器开发中&#xff0c;AVPlayer的状态管理就像驾驶手动挡汽车——你需要清楚知道当前处于哪个档位&#xff0c;才能平稳切换。我曾在项目中因为状态处理不当导致音乐卡顿&#xff0c;后来才发现是状态机流转出了问题。 AVPlayer…...

编程新知 2026/3/31 11:49:26

OneMore插件终极指南：160+功能免费解锁OneNote完整生产力

OneMore插件终极指南&#xff1a;160功能免费解锁OneNote完整生产力 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore OneMore是一款功能强大的OneNote免费开源插件&…...

编程新知 2026/3/31 11:45:20

新手福音：用快马平台将vmware官网概念转化为可交互的虚拟机演示代码

作为一名刚接触虚拟化技术的新手&#xff0c;我最近在VMware官网上看到了关于虚拟机的基础概念介绍。虽然理论知识很全面&#xff0c;但总觉得少了点动手实践的环节。直到发现了InsCode(快马)平台&#xff0c;它让我能够把抽象的概念快速转化为可运行的代码&#xff0c;这种学习…...

编程新知 2026/3/31 11:07:07

Local AI MusicGen商业应用：电商视频智能配乐

Local AI MusicGen商业应用&#xff1a;电商视频智能配乐 你是不是也遇到过这样的烦恼&#xff1f;制作电商短视频时&#xff0c;翻遍了免费音乐库&#xff0c;要么版权有问题&#xff0c;要么风格不搭&#xff0c;要么就是千篇一律的背景音。自己配乐&#xff1f;没那个时间和…...

编程新知 2026/3/31 10:57:05

7个实用技巧：从零开始开发jquery-qrcode自定义二维码生成器

7个实用技巧&#xff1a;从零开始开发jquery-qrcode自定义二维码生成器 【免费下载链接】jquery-qrcode qrcode generation standalone (doesnt depend on external services) 项目地址: https://gitcode.com/gh_mirrors/jq/jquery-qrcode jquery-qrcode是一款轻量级的纯…...

编程新知 2026/3/31 10:28:44

告别CTex！TeX Live+Texstudio组合安装避坑指南（Windows/Mac双平台）

告别CTex&#xff01;TeX LiveTexstudio组合安装避坑指南&#xff08;Windows/Mac双平台&#xff09; 如果你曾经使用过CTex套装&#xff0c;可能会被其"开箱即用"的便利性所吸引。但当你需要跨平台协作或追求更灵活的定制时&#xff0c;TeX LiveTexstudio的组合无疑…...

编程新知 2026/3/31 10:16:25

FreeRTOS数据通信避坑指南：为什么我的MessageBuffer总是接收失败？

FreeRTOS消息缓冲区实战&#xff1a;从接收失败到高效通信的深度解析 第一次在FreeRTOS项目中使用MessageBuffer时&#xff0c;我遇到了一个令人抓狂的问题——明明发送端显示消息已成功写入&#xff0c;接收端却总是返回0字节。调试器显示缓冲区非空&#xff0c;但xMessageBuf…...

编程新知 2026/3/31 9:34:07