vue中的计算属性computed

news2024/12/25 10:25:18

计算属性

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

  • 语法:

    1. 声明在computed配置项中,一个计算属性对应一个函数

    2. 使用起来和普通属性一样使用 {{计算属性名}}

    3. image-20230912112850534

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #000;
            text-align: center;
            width: 240px;
        }

        th,
        td {
            border: 1px solid #000;
        }

        h3 {
            position: relative;
        }
    </style>
</head>

<body>

    <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>礼物总数:{{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: 1 },
                    { id: 2, name: '玩具', num: 2 },
                    { id: 3, name: '铅笔', num: 5 },
                ],

            },
            computed: {
                totalCount() {
                    let total = this.list.reduce((sum, item) => sum + item.num, 0);
                    //reduce求和方法
                    return total;
                }
            }

        })
    </script>
</body>

</html>

image-20230912120003620

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

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

相关文章

14 道关于计算机网络的面试题,助你查漏补缺

最近在整理计算机网络的时候发现遇到了很多面试中常见的面试题&#xff0c;本部分主要原作者在 Github 等各大论坛收录的计算机网络相关知识和一些相关面试题时所做的笔记&#xff0c;分享这份总结给大家&#xff0c;对大家对计算机网络的可以来一次全方位的检漏和排查&#xf…

美陆军推动人工智能算法的持续更新

源自&#xff1a;蓝德智库 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨&#xff0c;并不意味着支持其观点或证实其内容的真实性。版权归原作者所有&#xff0c;如转载稿涉及版权等问题&#xff0c;请立即联系我们删除。 “人工智能技术与咨询”…

SpringMVC之JSR303与拦截器

一.JSR303 1.什么是JSR303 JSR是Java Specification Requests的缩写&#xff0c;意思是Java 规范提案。是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求。任何人都可以提交JSR&#xff0c;以向Java平台增添新的API和服务。JSR已成为Java界的一个重要标…

趣解设计模式之《怀念小时候玩的红白机嘛?》

〇、小故事 不知道大家小时候都有什么难忘的经历。作为80后的我来说&#xff0c;小时候印象最深的就是任天堂生产的FC游戏机&#xff08;俗称“红白机”&#xff09;&#xff0c;当时在家和小伙伴一起玩《魂斗罗》、《超级马里奥》、《冒险岛》、《坦克大战》等等游戏&#xf…

成果喜人 增速稳健丨Fortinet 谢青谈行业发展趋势与企业强劲增长驱动力

引言 随着时间进入到2023年第三季度末&#xff0c;Gartner、Forrester、ESG等全球权威咨询机构已相继发布Universal ZTNA、ZTE、OT安全等相关研究报告&#xff0c;2023年网络安全行业趋势渐趋明朗。同时&#xff0c;在这些相关报告中&#xff0c;作为创立二十余载&#xff0c;始…

leetcode 132. 分割回文串 II

2023.9.12 dp算法经典题之回文子串&#xff0c;先联想到 回文子串。 先用传统回文子串的dp方法定义一个二维数组存储该字符串的各子串是否为回文子串。 再定义一个一维dp数组用于存储下标0~i的最小分割次数。 初始化&#xff1a;先将该dp数组初始化为最坏情况&#xff0c;即下…

小米汽车进入生产调试冲刺阶段,雷军率队完成夏季新车路测

小米汽车通州生产基地即将进入生产调试冲刺阶段&#xff0c;小米集团董事长雷军率领小米汽车高层最近已经在新疆完成夏季新车路测&#xff0c;以争取在获得相关批文后尽快进入新车量产。 小米汽车的整个基地包括六个车间&#xff1a;压铸、冲压、车身、涂装、总装和电池。小米汽…

SpringBoot整合SSM-junit测试

前提 &#xff1a;创建一个新的springboot模块 创建一个员工案例(搭建) 创建员工实体类创建员工的控制层创建员工的服务层&#xff08;接口–实现类&#xff09;创建员工的数据层&#xff08;接口–实现类&#xff09; 以上的4种文件 是使用SSM必备的文件 创建员工实体类 属性…

vue3 element plus表格导出为excel自定义表头

新建一个out_excel.js文件并调用 import * as XLSX from "xlsx";export const exportToExcel (tableData, tableName, sheetName, fileName) > {const ws XLSX.utils.aoa_to_sheet([...[tableName], ...tableData]); // tableName为表头&#xff0c;tableData为…

【python自动化】Playwright基础教程定位操作

上文我们已经能够成功进行登录操作了。对于里面的一些定位方式&#xff0c;输入&#xff0c;点击等操作&#xff0c;在这一节&#xff0c;我们直接进行一个大汇总。以后遇到直接来这里搜。 定位操作 定位操作都在Page类下。养成看源码的习惯&#xff0c;结合官方文档&#xf…

这场科技巨变,有生之年有希望

见到一文&#xff0c;遂分享欲爆棚&#xff0c;总结如下。 具有人类水平的人工智能大约什么时候可以出现&#xff1f; 人类水平的人工智能&#xff0c;指的是&#xff0c;不需要借助人类&#xff0c;机器能够比人类更好地完成每项任务。 针对这个问题&#xff0c;有家机构在201…

Redis高效、安全的不停机数据迁移方案

Redis是目前最流行的键值对存储数据库&#xff0c;凭借高性能和丰富的数据类型的特性&#xff0c;不仅可以作为缓存&#xff0c;还可以作为一个可持久化的数据库存储。随着业务的发展和版本的迭代&#xff0c;必然会遇到内存不足、集群节点不够和BUG等一系列问题。为了防止这些…

四川百幕晟科技有限公司:抖音名称最多多少字?

在抖音上&#xff0c;用户可以为其帐户选择昵称&#xff0c;该昵称显示在用户的个人资料中。不过&#xff0c;很多人好奇&#xff0c;一个抖音昵称到底能有多少个字&#xff1f;本文将深入探讨抖音昵称长度限制以及一些最吸引人的昵称示例。 1、抖音昵称长度限制 抖音昵称的长度…

经典逝去,三方确认:iPhone15系列取消静音拨片,改用Action按钮

苹果公司将在9月13日凌晨1点举办秋季特别活动&#xff0c;这次活动将推出许多新产品&#xff0c;其中之一备受关注的是iPhone 15系列。在数月前&#xff0c;关于iPhone 15系列机型的消息早已传出&#xff0c;而最值得一提的变化就是取消自2007年初代iPhone发布以来一直存在的静…

【大数据环境安装】虚拟机安装操作

虚拟机安装操作 创建虚拟机 添加linux的iso镜像文件 开启虚拟机, 进行安装 正在校验, 可直接选择esc退出, 或者等待一会也是OK的 直到出现以下界面,开始选择语言: 结束后 , 点击重启, 然后进入系统, 到此, 虚拟机搭建工作结束 登录, 进入系统

【YOLOv 剪枝 轻量化】融合YOLOv5s与通道剪枝算法的奶牛轻量化个体识别方法(英文版含中文翻译)

融合YOLOv5s与通道剪枝算法的奶牛轻量化个体识别方法 Light-weight recognition network for dairy cows based on the fusion of YOLOv5s and channel pruning algorithm 论文链接知网链接 DOI链接 引用格式&#xff1a; 许兴时&#xff0c;王云飞&#xff0c;华志新&#xf…

全球汽车安全气囊芯片总体规模分析

安全气囊系统是一种被动安全性的保护系统&#xff0c;它与座椅安全带配合使用&#xff0c;可以为乘员提供有效的防撞保护。在汽车相撞时&#xff0c;汽车安全气囊可使头部受伤率减少25%&#xff0c;面部受伤率减少80%左右。 汽车安全气囊芯片是整个系统的控制核心&#xff0c;并…

中秋节包装礼盒样机|素材帮帮站

今天小编来给大家发福利了。中秋节临近&#xff0c;对中秋节礼盒样机愁眉苦展的宝子们看过来。 我们为您精心准备了各种款式、各种风格的中秋节包装礼盒样机素材54款【PSD源文件】&#xff0c;让您轻松打造独一无二的中秋礼盒。 部分效果图如下&#xff1a; 还有更多的素材等…

负载均衡-ribbon源码解析

负载均衡-ribbon源码解析 1 LoadBalanced注解 /*** 基于ribbon调用服务及负载均衡* return*/ LoadBalanced Bean public RestTemplate restTemplate(){return new RestTemplate(); }Bean ConditionalOnMissingBean public RestTemplateCustomizer restTemplateCustomizer(fin…

利用尾部网红的力量:跨境卖家的海外市场营销秘诀

随着互联网的不断发展&#xff0c;海外跨境电商已经成为全球贸易的重要一环。与此同时&#xff0c;社交媒体的兴起也催生了大批的海外网红&#xff0c;他们的粉丝群体庞大&#xff0c;有着巨大的市场潜力。然而&#xff0c;大部分跨境卖家都会集中在热门网红身上&#xff0c;而…