【Vue2+3入门到实战】(5)Vue基础之Computed计算属性 详细示例

news2025/1/17 21:42:41

目录

    • 一、今日学习目标
      • 1.computed计算属性
    • 二、computed计算属性
      • 1.概念
      • 2.语法
      • 3.注意
      • 4.案例
      • 5.代码准备
    • 三、computed计算属性 VS methods方法
      • 1.computed计算属性
      • 2.methods计算属性
      • 3.计算属性的优势
      • 4.总结
    • 四、计算属性的完整写法
    • 五、综合案例-成绩案例
    • 六、Computed计算属性总结

在这里插入图片描述

一、今日学习目标

1.computed计算属性

  1. 基础语法
  2. 计算属性vs方法
  3. 计算属性的完整写法
  4. 成绩案例

二、computed计算属性

1.概念

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

2.语法

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

3.注意

  1. computed配置项和data配置项是同级
  2. computed中的计算属性虽然是函数的写法,但他依然是个属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

4.案例

比如我们可以使用计算属性实现下面这个业务场景
请添加图片描述

5.代码准备

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单</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>礼物总数:? 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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 },
        ]
      }
    })
  </script>

三、computed计算属性 VS methods方法

1.computed计算属性

作用:封装了一段对于数据的处理,求得一个结果

语法:

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

2.methods计算属性

作用:给Vue实例提供一个方法,调用以处理业务逻辑

语法:

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

3.计算属性的优势

  1. 缓存特性(提升性能)

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

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

  2. methods没有缓存特性

  3. 通过代码比较

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 300px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
    span {
      position: absolute;
      left: 145px;
      top: -4px;
      width: 16px;
      height: 16px;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #e63f32;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单🛒<span>?</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>礼物总数:{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

4.总结

1.computed有缓存特性,methods没有缓存

2.当一个结果依赖其他多个值时,推荐使用计算属性

3.当处理业务逻辑时,推荐使用methods方法,比如事件的处理函数

四、计算属性的完整写法

既然计算属性也是属性,能访问,应该也能修改了?

  1. 计算属性默认的简写,只能读取访问,不能 “修改”
  2. 如果要 “修改” → 需要写计算属性的完整写法

在这里插入图片描述

完整写法代码演示

 <div id="app">
    姓:<input type="text" v-model="firstName"> +
    名:<input type="text" v-model="lastName"> =
    <span></span><br><br> 
    <button>改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
 		firstName: '刘',
        lastName: '备'
      },
      computed: {

      },
      methods: {

      }
    })
  </script>

五、综合案例-成绩案例

在这里插入图片描述

功能描述:

1.渲染功能

2.删除功能

3.添加功能

4.统计总分,求平均分

思路分析:

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件, 阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

六、Computed计算属性总结

computed计算属性是Vue.js中的一个特殊属性,用于对数据进行计算和处理,并返回一个新的值。它的特点是能够根据数据的变化自动更新计算结果,并且可以缓存计算结果以提高性能。

使用computed属性可以将复杂的计算逻辑分解成多个简单的步骤,使代码更加清晰和可维护。

computed属性可以像普通属性一样在模板中使用,而不需要在Vue实例中额外定义和更新。

computed属性的语法格式为:

computed: {
propName: function() {
// 通过this访问Vue实例的数据
return /* 计算结果 */;
}
}

其中,propName是计算属性的名称,可以在模板中使用。

computed属性内部的函数可以使用this关键字来访问Vue实例的数据,通过计算这些数据可以得到一个新的值,并返回。

在模板中使用计算属性时,可以像访问普通属性一样使用计算属性的名称。

computed属性会根据它所依赖的数据的变化而自动重新计算,只要依赖的数据发生变化,计算属性就会重新计算,并更新模板中的值。

computed属性还有一个重要的特性是它会缓存计算结果,在依赖的数据没有发生变化时,计算属性会直接返回缓存的结果,而不会重新计算。这样可以提高性能,避免不必要的计算。

需要注意的是,computed属性只有在模板中使用时才会被计算和更新,如果在代码中直接访问计算属性的值,不会触发计算属性的计算和更新。

总之,computed计算属性是Vue.js中一种非常有用的功能,可以简化复杂的计算逻辑,提高代码的可读性和可维护性,同时也能提高性能,避免不必要的计算。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1345274.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

荣耀之城(富饶之地)

规则简介 这是一个回合制的游戏&#xff0c;每个回合都是先选角色然后按照角色编号依次执行回合。 8个角色&#xff1a;刺客、小偷、魔术师、国王、住持、商人、建筑师、领主 根据人数的不同&#xff0c;按照不同的规则依次选取一个角色&#xff0c;国王第一个选&#xff0c…

【数学建模美赛M奖速成系列】Matplotlib绘图技巧(二)

Matplotlib绘图技巧&#xff08;二&#xff09; 写在前面2. 函数间区域填充函数fill_between()和fill()参数&#xff1a; 3. 散点图 scatter4. 直方图 hist5. 条形图 bar5.1 一个数据样本的条形图参数&#xff1a; 5.2 多个数据样本进行对比的直方图5.3 水平条形图参数 5.4 绘制…

Redis内存使用率高,内存不足问题排查和解决

问题现象 表面现象是系统登录突然失效&#xff0c;排查原因发现&#xff0c;使用redis查询用户信息异常&#xff0c;从而定位到redis问题 if (PassWord.equals(dbPassWord)) {map.put("rtn", 1);map.put("value", validUser);session.setAttribute("…

结构体:子网掩码

#include<iostream> using namespace std; union IP //创建共用体 {unsigned char a[4];unsigned int ip; }; IP getIP() //获取ip函数 {int a, b, c, d;scanf_s("%d.%d.%d.%d", &a, &b, &c, &d);IP address;address.a[3] a; address.a[2] …

C. Load Balancing 一个序列同时加一个数和减一个数,直到最大和最小之间相差最大为1(结论可记住)

题目&#xff1a; https://atcoder.jp/contests/abc313/tasks/abc313_c 思想&#xff1a;1.给定一个固定的B&#xff0c;求使A等于B所需的最小运算次数 2.在所有最大值和最小值最多相差1的B中&#xff0c;找出一个所需的运算次数最少的&#xff0c;即1 做法&#xff1a;构造…

Vue项目优化-组件配置化、插件使用

Vue中可以根据需要去加载插件&#xff0c;一些自己写的插件在多个项目中都是需要用到的&#xff0c;通过把它们插件化&#xff0c;可以实现在需要用到的项目中便捷地复用&#xff0c;实现热拔插。 一、问题背景 以弹窗表单组件为例&#xff0c;平常我们使用弹窗组件都是通过页面…

C单片机数据类型与格式化

C语言数据类型 关键字位数表示范围stdint关键字ST关键字举例unsigned char80 ~ 255uint8_tu8u8 data 128char8-128 ~ 127int8_ts8s8 temperature 25unsigned short160 ~ 65535uint16_tu16u16 counter 5000short16-32768 ~ 32767int16_ts16s16 position 32767unsigned int3…

[Angular] 笔记 21:@ViewChild

chatgpt: 在 Angular 中&#xff0c;ViewChild 是一个装饰器&#xff0c;用于在组件类中获取对模板中子元素、指令或组件的引用。它允许你在组件类中访问模板中的特定元素&#xff0c;以便可以直接操作或与其交互。 例如&#xff0c;如果你在模板中有一个子组件或一个具有本地…

Autosar MCAL-RH850P1HC Dio配置

文章目录 DioDioGeneralDioCriticalSectionProtectionDioDevErrorDetectDioDeviceNameDioFlipChannelApiDioMaskedWritePortApiDioUseWriteVerifyErrorInterfaceDioVersionCheckExternalModulesDioVersionInfoApiDioWriteVerifyDioWriteVerifyErrorInterface DioPortP0-P9DioPo…

关于mysql8.0相关的升级

不知不觉&#xff0c;MySQL8.0已经有好多个GA小版本了。目前互联网上也有很多关于MySQL8.0的内容了&#xff0c;MySQL8.0版本基本已到稳定期&#xff0c;相信很多小伙伴已经在接触8.0了。本篇文章主要介绍从5.7升级到8.0版本的过程及注意事项&#xff0c;有想做版本升级的小伙伴…

技术探秘:在RISC Zero中验证FHE——RISC Zero应用的DevOps(2)

1. 引言 前序博客&#xff1a; 技术探秘&#xff1a;在RISC Zero中验证FHE——由隐藏到证明&#xff1a;FHE验证的ZK路径&#xff08;1&#xff09; 技术探秘&#xff1a;在RISC Zero中验证FHE——由隐藏到证明&#xff1a;FHE验证的ZK路径&#xff08;1&#xff09; 中&…

DDOS攻击原理,如何解读?

互联网安全现状 随着网络世界的高速发展&#xff0c;各行业数字化转型也在如火如荼的进行。但由于TCP/IP网络底层的安全性缺陷&#xff0c;钓鱼网站、木马程序、DDoS攻击等层出不穷的恶意攻击和高危漏洞正随时入侵企业的网络&#xff0c;如何保障网络安全成为网络建设中的刚性…

【JavaEE】多线程(7) -- 线程池的概念和简单实现

目录 1.线程池是什么 2.标准库中的线程池 2.1ThreadPoolExecutor 2.2构造方法参数介绍 2.3拒绝策略(面试易考) 2.4Executor的使用 3.实现线程池 1.线程池是什么 线程池是一种用来管理线程的机制&#xff0c;它可以有效地控制线程的创建、复用和销毁&#xff0c;从而提高程…

使用flutter开发windows桌面软件读取ACR22U设备的nfc卡片id,5分钟搞定demo

最近有个需求&#xff0c;要使用acr122u读卡器插入电脑usb口&#xff0c;然后读取nfc卡片的id&#xff0c;并和用户账号绑定&#xff0c;调研了很多方式&#xff0c;之前使用rust实现过一次&#xff0c;还有go实现过一次&#xff0c;然后使用electron的时候遇到安装pcsc-lite失…

2024年【危险化学品经营单位安全管理人员】复审考试及危险化学品经营单位安全管理人员模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位安全管理人员复审考试是安全生产模拟考试一点通总题库中生成的一套危险化学品经营单位安全管理人员模拟考试&#xff0c;安全生产模拟考试一点通上危险化学品经营单位安全管理人员作业手机同步练习…

c++ 简单实用万能异常捕获

多层捕获异常&#xff0c;逐渐严格。并打印出错信息和位置&#xff1a;哪个文件&#xff0c;哪个函数&#xff0c;具体哪一行代码。 #include <stdexcept> // 包含标准异常类的头文件try {int a 2 / 0; }catch (const std::runtime_error& e) {// 捕获 std::runt…

【Pytorch】学习记录分享10——PyTorchTextCNN用于文本分类处理

【Pytorch】学习记录分享10——PyTorchTextCNN用于文本分类处理 1. TextCNN用于文本分类2. 代码实现 1. TextCNN用于文本分类 具体流程&#xff1a; 2. 代码实现 # coding: UTF-8 import torch import torch.nn as nn import torch.nn.functional as F import numpy as np…

Spring高手之路-Spring AOP

目录 什么是AOP Spring AOP有如下概念 补充&#xff1a; AOP是如何实现的 Spring AOP 是通过代理模式实现的。 Spring AOP默认使用标准的JDK动态代理进行AOP代理。 什么是AOP AOP(Aspect-Oriented Programming)&#xff0c;即面向切面编程&#xff0c;用人话说就是把公共的…

php 8.4 xdebug扩展编译安装方法

最新版php8.4 xdebug扩展只能通过编译方式安装, pecl是安装不了的, 编译方法如下 下载最新版xdebug git clone https://github.com/xdebug/xdebug.git 却换入xdebug目录执行编译安装xdebug cd xdebug phpize./configure --enable-xdebugmakemake install3. 配置启用xdebug 这…

大语言模型(LLM)训练平台与工具

LLM 是利用深度学习和大数据训练的人工智能系统&#xff0c;专门 设计来理解、生成和回应自然语言。 大模型训练平台和工具提供了强大且灵活的基础设施&#xff0c;使得开发和训练复杂的语言模型变得可行且高效。 平台和工具提供了先进的算法、预训练模型和优化技术&#xff0c…