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

vue计算属性 初步使用案例

<template><div><h1>购物车</h1><div v-for="item in filteredItems" :key="item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type="number" v-model.number="item.quantity" min="1" /><button @click="removeItem(item.id)">移除</button></div><div><label>筛选价格(仅仅筛选单价):<select v-model="priceFilter"><option value="all">全部</option><option value="under50">小于 50 元</option><option value="50to100">50 - 100 元</option><option value="above100">大于 100 元</option></select></label></div><h2>总价:{{ totalPrice }} 元</h2><button @click="clearCart">清空购物车</button></div>
</template><script>
export default {data() {return {cartItems: [{ id: 1, name: "商品 A", price: 30, quantity: 1 },{ id: 2, name: "商品 B", price: 60, quantity: 1 },{ id: 3, name: "商品 C", price: 120, quantity: 1 },],priceFilter: "all", // 筛选条件};},computed: {// 计算总价totalPrice() {return this.cartItems.reduce((total, item) => total + item.price * item.quantity,0);},// 根据筛选条件过滤商品filteredItems() {if (this.priceFilter === "under50") {return this.cartItems.filter((item) => item.price < 50);} else if (this.priceFilter === "50to100") {return this.cartItems.filter((item) => item.price >= 50 && item.price <= 100);} else if (this.priceFilter === "above100") {return this.cartItems.filter((item) => item.price > 100);} else {return this.cartItems;}},},methods: {// 移除商品removeItem(id) {this.cartItems = this.cartItems.filter((item) => item.id !== id);},// 清空购物车clearCart() {this.cartItems = [];},},
};
</script><style scoped>
h1,
h2 {color: #333;
}
button {margin-top: 10px;
}
</style>

效果展示

(本章节仅仅面向初步学习,页面简陋)

页面由下面代码决定

<template><div><h1>购物车</h1><div v-for="item in filteredItems" :key="item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type="number" v-model.number="item.quantity" min="1" /><button @click="removeItem(item.id)">移除</button></div><div><label>筛选价格(仅仅筛选单价):<select v-model="priceFilter"><option value="all">全部</option><option value="under50">小于 50 元</option><option value="50to100">50 - 100 元</option><option value="above100">大于 100 元</option></select></label></div><h2>总价:{{ totalPrice }} 元</h2><button @click="clearCart">清空购物车</button></div>
</template>

其中 用v-for循环进行页面打印表单。

computed是计算属性,它与data同级代码块。

这个页面,由计算属性来操控。

我们的筛选板块,

用v-model对priceFilter进行了双向数据帮当,单选每一项的时候,会改变其值。

在我们的计算属性当中 

会根据我们单项筛选,进行相应的页面展示,计算属性类似于函数,也有其返回值,返回值可以是个数组。

计算属性可以写多个 如同函数类似,

totalPrice()用于计算总价格

计算属性可用于插值表达式

相关文章:

vue计算属性 初步使用案例

<template><div><h1>购物车</h1><div v-for"item in filteredItems" :key"item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type"number" v-model.number"item.quantity"…...

大模型时代,呼叫中心部门如何建设一套呼出机器人系统?

大模型时代&#xff0c;呼叫中心部门如何建设一套呼出机器人系统&#xff1f; 作者&#xff1a;开源呼叫中心系统 FreeIPCC&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/freeipcc 在大模型时代&#xff0c;呼叫中心部门建设一套呼出机器人系统需要综合考虑技…...

使用Java绘制图片边框,解决微信小程序map组件中marker与label层级关系问题,label增加外边框后显示不能置与marker上面

今天上线的时候发现系统不同显示好像不一样&#xff0c;苹果手机打开的时候是正常的&#xff0c;但是一旦用安卓手机打开就会出现label不置顶的情况。尝试了很多种办法&#xff0c;也在官方查看了map相关的文档&#xff0c;发现并没有给label设置zIndex的属性&#xff0c;只看到…...

力扣 LeetCode 142. 环形链表II(Day2:链表)

解题思路&#xff1a; 使用set判断是否重复添加&#xff0c;如果set加入不进去证明之前到达过该节点&#xff0c;有环 public class Solution {public ListNode detectCycle(ListNode head) {Set<ListNode> set new HashSet<>();ListNode cur head;while (cur …...

用MVVM设计模式提升WPF开发体验:分层架构与绑定实例解析

MVVM&#xff08;Model-View-ViewModel&#xff09;是一种架构模式&#xff0c;广泛应用于现代前端开发&#xff0c;尤其是在微软的WPF&#xff08;Windows Presentation Foundation&#xff09;应用程序中。它旨在通过将视图&#xff08;UI&#xff09;与业务逻辑&#xff08;…...

C++中的动态断言和静态断言

C中包含动态断言&#xff08;assert&#xff09;和静态断言&#xff08;static_assert&#xff09;&#xff0c;下面分别分析各自的用法。 1.动态断言&#xff08;assert&#xff09; assert 是一个宏&#xff0c;在预处理阶段不生效&#xff0c;在运行阶段才起作用&#xff0…...

运算放大器的学习(一)输入阻抗

输入阻抗 最近需要对运算放大器进行学习&#xff0c;我们后面逐一对其参数进行了解。 首先了解下输入阻抗。 放大电路技术指标测试示意图&#xff1a; 输入电阻&#xff1a; 从放大电路的输入端看进去的等效电阻称为放大电路的输入电阻&#xff0c;如上图&#xff0c;此处考虑…...

Rust枚举之卧龙凤雏(Rust Option枚举、Rust Result枚举)(Rust Enum、Some(T)、Ok(T)、Err(E))链式操作

文章目录 Rust 枚举之卧龙凤雏枚举的基本概念枚举定义示例 Result 枚举&#xff1a;凤雏Result 枚举的定义Result 的使用场景示例 1&#xff1a;文件读取示例 2&#xff1a;链式操作与错误处理 Option 枚举&#xff1a;卧龙Option 枚举的定义Option 的使用场景示例 1&#xff1…...

TCP/IP协议,TCP和UDP区别

TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/互联网协议&#xff09;是一组用于计算机网络中的通信协议&#xff0c;它为数据传输提供了标准框架&#xff0c;广泛用于互联网和局域网中。TCP/IP协议包括多个层次&#xff0c;每…...

【go从零单排】Timer、Epoch 时间函数

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;time.Timer 是一个用于在指定时间后执行操作的计时器。…...

壁仞科技上市前最后一波 校招 社招 内推

随着美国大选结束&#xff0c;国内GPU 产业得到空前的的发展空间&#xff0c;国内芯片相关股票一片飘红。 国内大型 GPU厂商壁仞科技&#xff0c;摩尔线程等正紧锣密鼓地加紧上市。 GPGPU 芯片赛道来到了史无前例的红利点&#xff0c;抓住机会&#x1f4aa; 壁仞科技正在火热…...

【微软报告:多模态基础模型】(2)视觉理解

欢迎关注【youcans的AGI学习笔记】原创作品 【微软报告&#xff1a;多模态基础模型】&#xff08;1&#xff09;从专家到通用助手 【微软报告&#xff1a;多模态基础模型】&#xff08;2&#xff09;视觉理解 【微软报告&#xff1a;多模态基础模型】&#xff08;3&#xff09;…...

Linux 驱动

四十三、Linux设备树 43.1 DTS、DTB 和 DTC DTS 是设备树源码文件 DTB 是将DTS 编译以后得到的二进制文件。 DTC 工具将.dts 编译为.dtb 43.2 DTS语法 43.2.1 .dtsi 头文件 在.dts 设备树文件中&#xff0c;可以通过“#include”来引用.h、.dtsi 和.dts 文件。 …...

【数学二】线性代数-线性方程组-齐次线性方程组、非齐次线性方程组

考试要求 1、会用克拉默法则. 2、理解齐次线性方程组有非零解的充分必要条件及非齐次线性方程组有解的充分必要条件. 3、理解齐次线性方程组的基础解系及通解的概念,掌握齐次线性方程组基础解系和通解的求法. 4、理解非齐次线性方程组的解的结构及通解的概念. 5、会用初等行变…...

Git别名设置

在 Git 中设置命令别名可以让你更高效地使用常见的 Git 命令。通过为常用命令创建简短的别名&#xff0c;可以减少输入的字符数并加速工作流程。 参考链接 设置 Git 命令别名的方法&#xff1a; 使用 Git 配置命令&#xff1a; Git 允许通过 git config 命令来设置命令别名。这…...

算法基础 -- 红黑树原理与插入伪代码

红黑树原理与插入伪代码 红黑树的原理 红黑树是一种自平衡的二叉搜索树&#xff0c;通过对节点的颜色&#xff08;红色或黑色&#xff09;以及结构的约束条件来保持树的平衡。红黑树的原理可以通过以下五个特性描述&#xff1a; 节点是红色或黑色。根节点必须是黑色。所有叶…...

力扣 LeetCode 27. 移除元素(Day1:数组)

解题思路&#xff1a; 注意&#xff1a;数组只能覆盖&#xff0c;不能删除 erase方法的复杂度为O( n )而不是O( 1 )&#xff0c;因为需要把删除后后面的数组向前移动 方法一&#xff1a;双层for循环暴力 方法二&#xff1a;快慢指针 fast表示新数组的元素 slow表示新数组元…...

微服务链路追踪skywalking安装

‌SkyWalking是一个开源的分布式追踪系统&#xff0c;主要用于监控和分析微服务架构下的应用性能。‌ 它提供了分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案&#xff0c;特别适用于微服务、云原生架构和基于容器的环境&#xff08;如Docker、K8s、Mesos&…...

mqtt学习笔记(一)

以解决问题方式逐步学习探索 mqtt使用场景mqtt可能缺点mqtt学习疑问探索1、mqtt主题发布过的历史消息&#xff0c;全新连接的client能消费到吗&#xff1f;2、mqtt的client掉线如何重连&#xff0c;重连后订阅的topic配置还在不&#xff1f;3、mqtt的client掉线重连后&#xff…...

Kafka Eagle 安装教程

目录 前言 一、安装前的准备 1. 系统要求 2. 安装 JDK 3. 安装 Kafka 和 Zookeeper 4. MySQL 环境准备 二、下载并安装 Kafka Eagle 三、配置 Kafka Eagle 1. 编辑配置文件 2. 配置 Kafka 和 Zookeeper 信息 四、启动 Kafka Eagle 五、访问 Kafka Eagle 六、测试功…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...