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

VUE的计算属性

news 2025/9/5 18:37:52

<!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; …...

编程日记 2023/11/30 13:02:25

uniapp中使用pageScrollTo让页面滚动到固定节点或距离

uniapp中使用pageScrollTo让页面滚动到固定节点或距离 思路&#xff1a;计算当前节点距离顶部的距离滚动距离然后使用pageScrollTo进行滚动&#xff08;要保证页面加载完成之后在执行&#xff09; #topic" id &#xff1a;页面的节点 changeTop(id) {let query uni.c…...

编程日记 2023/11/30 13:01:24

使用机器学习方法进行分析和处理：对高质量图像进行压缩

使用SVD&#xff08;奇异值分解&#xff09;进行图像压缩与普通压缩工具压缩的主要区别在于压缩原理和压缩效果。 压缩原理&#xff1a; 普通图像压缩工具通常采用有损压缩或无损压缩算法&#xff0c;如JPEG、PNG等&#xff0c;它们主要针对图像的像素进行变换和编码。而SVD图像…...

编程日记 2023/11/30 12:59:22

多线程面试总结

1. 创建线程有哪几种方式 创建线程有三种方式&#xff0c;分别是继承Thread类、实现Runnable接口、实现Callable接口。 通过继承Thread类来创建并启动线程的步骤如下&#xff1a; 定义Thread类的子类&#xff0c;并重写该类的run()方法&#xff0c;该run()方法将作为线程执行…...

编程日记 2023/11/30 12:56:18

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…...

编程日记 2023/11/30 12:55:16

血的教训--kail系统免密centos7的坑【高版本ssh免密低版本ssh的坑】

血的教训–kail系统免密centos7的坑【高版本ssh免密低版本ssh的坑】 最近下载了一个2023版本的kail系统&#xff0c;但是经过几次设置免密后&#xff0c;ssh过去一直让提供密码&#xff0c;所以就仔细的分析了一下&#xff0c;果然还是发现了点猫腻 接上一个博客&#xff0c;大…...

编程日记 2023/11/30 12:54:15

javaagent字节码增强浅尝

概述 javaagent 技术广泛应用于对代码的增强&#xff0c;比如统计方法执行时间、GC 信息打印、分布式链路跟踪等&#xff1b;实现方式包括 javassist 和 bytebuddy&#xff0c;bytebuddy 是对 javassist 的改进&#xff1b;类似于 spring 中的 AOP&#xff1b; Instrumentati…...

编程日记 2023/11/30 12:53:14

计算机组成原理-Cache替换算法

文章目录 总览随机算法&#xff08;RAND&#xff09;先进先出算法&#xff08;FIFO&#xff09;近期最少使用算法&#xff08;LRU&#xff09;最不经常使用算法&#xff08;LFU&#xff09;总结 总览 随机算法&#xff08;RAND&#xff09; 没有选择性地考虑替换哪一块Cache&a…...

编程日记 2023/11/30 12:52:13

Adobe 家族系列download

adobe 前言 Adobe公司的产品线中拥有多个家族桶&#xff0c;下面是Adobe全家桶产品的功能介绍&#xff1a; Creative Cloud&#xff08;创意云&#xff09;&#xff1a;包含Photoshop、Illustrator、InDesign、Premiere Pro、After Effects、Lightroom等创意设计、视频制作和…...

编程日记 2023/11/30 12:51:12

97.STL-查找算法 find

目录 STL-查找算法find 1.基本用法&#xff1a; 2.查找自定义类型&#xff1a; 3.查找范围&#xff1a; STL-查找算法find 在C的STL&#xff08;标准模板库&#xff09;中&#xff0c;find 算法用于在指定范围内查找指定值的元素。 功能描述&#xff1a; 查找指定元素&…...

编程日记 2023/11/30 12:50:11

如何应对雨天飞行的挑战？无人机机库防护能力解析

一、 背景介绍 无人机机库是无人机停放和起降场所&#xff0c;类似传统飞机的 hangar&#xff08;飞机库&#xff09;。它是一个专门用于存储、维护和保护无人机的设施。无人机机库的存在有助于提高无人机的安全性&#xff0c;同时也为无人机提供了一个有序的管理场所。 雨天…...

编程日记 2023/11/30 12:49:10

机器学习笔记 - 3D数据的常见表示方式

一、简述 从单一角度而自动合成3D数据是人类视觉和大脑的基本功能，这对计算机视觉算法来说是比较难的。但随着LiDAR、RGB-D 相机（RealSense、Kinect）和3D扫描仪等3D传感器的普及和价格的降低，3D 采集技术的最新进展取得了巨大飞跃。与广泛使用的 2D 数据不同，3D 数据具有丰…...

编程日记 2023/11/30 12:48:08

【Node.js】解决npm报错：RequestError: unable to verify the first certificate

1. 问题简述 帖主从nodejs官网下载安装nodejs后&#xff0c;发现使用以下命令安装electron会报错&#xff1a; npm install electron 报错信息如下&#xff1a; npm ERR! RequestError: unable to verify the first certificate 2. 解决方案 网上列举的方案&#xff0c;无…...

编程日记 2023/11/30 12:47:08

语言模型文本处理基石：Tokenizer简明概述

编者按&#xff1a;近年来&#xff0c;人工智能技术飞速发展&#xff0c;尤其是大型语言模型的问世&#xff0c;让 AI 写作、聊天等能力有了质的飞跃。如何更好地理解和利用这些生成式 AI&#xff0c;成为许多开发者和用户关心的问题。 今天&#xff0c;我们推出的这篇文章有助…...

编程日记 2023/11/30 12:46:06

淘宝商品详情数据接口（店铺搬家、数据分析、代购商城、ERP选品、无货源铺货、品牌监控）

使用淘宝API接口需要以下步骤&#xff1a; 注册开发者账号&#xff1a;在淘宝开放平台&#xff08;https://o0b.cn/anzexi&#xff09;上注册一个开发者账号&#xff0c;并创建一个应用。 获取API密钥&#xff1a;在应用页面上获取API密钥&#xff0c;这是后续调用API接口的凭…...

编程日记 2023/11/30 12:44:04

面试篇之微服务（一）

目录 概览 1.什么是微服务&#xff1f; 2.微服务带来了哪些挑战&#xff1f; 3.现在有哪些流行的微服务解决方案&#xff1f; 这三种方案有什么区别吗&#xff1f; 4.说下微服务有哪些组件&#xff1f; 注册中心 5.注册中心是用来干什么的&#xff1f; 6.SpringCloud可…...

编程日记 2023/11/30 12:43:03

智慧科研助力科研数据的分析处理

如今&#xff0c;科研领域的发展日新月异&#xff0c;数据量也越来越大。这时&#xff0c;智慧科研可视化技术不仅为科研人员提供了快速高效的数据分析手段&#xff0c;而且为科研工作的推进提供了新的思路和方法。通过可视化手段&#xff0c;我们可以将各种数据、信息、知识以…...

编程日记 2023/11/30 12:40:59

el-select实现分屏效果

动态绑定class值 &#xff0c;多种判断 :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…...

编程日记 2023/11/30 12:39:57

微信小程序本地和真机调试文件上传成功但体验版不成功

可能是微信小程序ip白名单的问题&#xff0c;去微信公众平台&#xff08;小程序&#xff09;上设置小程序的ip白名单 1、在本地中取消不校验 然后在本地去上传文件&#xff0c;就会发现控制台报错了&#xff0c;会提示一个https什么不在ip白名单&#xff0c;复制那个网址 2、…...

编程日记 2023/11/30 12:38:56

windows系统用nginx部署web应用

要在Windows系统上使用Nginx进行本地部署和运行Web应用程序&#xff0c;可以按照以下步骤进行操作&#xff1a; 1.首先下载nginx&#xff0c;需要去nginx官网&#xff1a; nginx: download 下载最新版本的&#xff1a; 2.解压缩Nginx&#xff1a;找个磁盘位置&#xff0c;新…...

编程日记 2023/11/30 12:37:55

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/9/2 17:00:31

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/8/12 1:14:57

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/7/25 23:24:13

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/9/5 11:49:49

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/9/2 22:30:49

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/3 19:20:49

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/8/28 16:54:43

Electron简介（附电子书学习资料）

一、什么是Electron&#xff1f; Electron 是一个由 GitHub 开发的 开源框架&#xff0c;允许开发者使用 Web技术&#xff08;HTML、CSS、JavaScript&#xff09; 构建跨平台的桌面应用程序&#xff08;Windows、macOS、Linux&#xff09;。它将 Chromium浏览器内核 和 Node.j…...

编程新知 2025/7/17 10:30:21

IP选择注意事项

IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时&#xff0c;需要考虑以下参数&#xff0c;然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...

编程新知 2025/8/19 23:53:24