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()用于计算总价格

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

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

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

相关文章

C++编程技巧与规范-类和对象

类和对象 1. 静态对象的探讨与全局对象的构造顺序 静态对象的探讨 类中的静态成员变量(类类型静态成员) 类中静态变量的声明与定义&#xff08;类中声明类外定义&#xff09; #include<iostream> using namespace std;namespace _nmspl {class A{public:A():m_i(5){…

如何在 Ubuntu 上安装 RStudio IDE(R语言集成开发环境) ?

RStudio 是一个功能强大的 R 语言集成开发环境(IDE)&#xff0c;R 是一种主要用于统计计算和数据分析的编程语言。任何从事数据科学项目或任何其他涉及 R 的类似任务的人&#xff0c;RStudio 都可以使您的工作更轻松。 本指南将引导您完成在 Ubuntu 系统上安装 RStudio 的过程…

高中数学:概率-相关运算性质

文章目录 一、概率定义二、运算性质三、事件相互独立四、频率与概率五、练习 一、概率定义 二、运算性质 基本性质 互斥事件的性质 对立事件性质 包含事件的性质 有交集但不包含的事件性质 三、事件相互独立 注意&#xff1a; 四、频率与概率 五、练习

VM安装Ubuntu详细配置

1、第一步修改阿里源&#xff1a;打开软件 与更新&#xff0c;更改下载自为&#xff1a;http://mirrors.aliyun.co/ubuntu 2、安装open-vm-tools: 安装两个文件&#xff1a;sudo api install open-vm-tools open-vm-tools-desktop 3、安装搜狗输入法&#xff1a;点击下载 a、…

乒乓球筐(多组输入模板)

乒乓球筐 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNext()) {int[] hash new i…

AI 写作(五)核心技术之文本摘要:分类与应用(5/10)

一、文本摘要&#xff1a;AI 写作的关键技术 文本摘要在 AI 写作中扮演着至关重要的角色。在当今信息爆炸的时代&#xff0c;人们每天都被大量的文本信息所包围&#xff0c;如何快速有效地获取关键信息成为了一个迫切的需求。文本摘要技术正是为了解决这个问题而诞生的&#x…

TCP 三次握手意义及为什么是三次握手

✨✨✨励志成为超级技术宅 ✨✨✨ TCP的三次握手在笔试和面试中经常考察&#xff0c;非常重要&#xff0c;那么大家有没有思考过为什么是三次握手&#xff0c;俩次握手行不行呢&#xff1f;四次握手行不行呢&#xff1f;如果大家有疑问或者不是很理解&#xff0c;那么这篇博客…

初识算法 · 位运算(2)

目录 前言&#xff1a; 判定字符是否唯一 丢失的数字 比特位计数 只出现一次的数字III 前言&#xff1a; ​本文的主题是位运算&#xff0c;通过四道题目讲解&#xff0c;一道是判断字符是否唯一&#xff0c;一道是只出现一次的数字III&#xff0c;一道是比特位计数&…

Unity Assembly Definition Assembly Definition Reference

文章目录 1.Unity 预定义程序集2.Assembly definition3. Assembly definitions相关实验 1.Unity 预定义程序集 Unity 有4个预定义程序集&#xff1a; 阶段程序集名脚本文件1Assembly-CSharp-firstpassStandard Assets, Pro Standard Assets和Plugins文件夹下面的运行时脚本2A…

【征稿倒计时!华南理工大学主办 | IEEE出版 | EI检索稳定】2024智能机器人与自动控制国际学术会议 (IRAC 2024)

#华南理工大学主办&#xff01;#IEEE出版&#xff01;EI稳定检索&#xff01;#组委阵容强大&#xff01;IEEE Fellow、国家杰青等学术大咖领衔出席&#xff01;#会议设置“优秀论文”“优秀青年学者报告”“优秀海报”等评优奖项 2024智能机器人与自动控制国际学术会议 &#…

[CKS] Create/Read/Mount a Secret in K8S

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于读取、创建以及挂载secret的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[C…

5个非LLM软件趋势

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

社会工程骗局席卷金融机构

2024 年北美金融机构收到的社交工程诈骗报告数量比一年前增加了 10 倍。数据显示&#xff0c;诈骗现在占所有数字银行欺诈的 23%。 深度伪造和 GenAI 诈骗的危险日益增加 BioCatch 在其 2024 年北美数字银行欺诈趋势报告中公布了这些发现&#xff0c;该报告还详细说明了报告的…

读数据质量管理:数据可靠性与数据质量问题解决之道03数据目录

1. 同步数据 1.1. 不同的数据仓库和数据湖通过数据集成层来进行桥接 1.2. AWS Glue、Fivetran和Matillion等数据集成工具从不同来源收集数据&#xff0c;统一这些数据&#xff0c;并将其转换为上游来源 1.3. 数据集成的一个典型用例是收集数据湖的数据并以结构化格式将其加载…

【数据库】数据库迁移的注意事项有哪些?

数据库迁移是一个复杂且关键的过程&#xff0c;需要谨慎处理以确保数据的完整性和应用程序的正常运行。以下是一些数据库迁移时需要注意的事项&#xff1a; 1. 充分的前期准备 1.1 评估迁移需求 明确目标&#xff1a;确定迁移的具体目标&#xff0c;例如添加新字段、修改现…

LabVIEW开发相机与显微镜自动对焦功能

自动对焦是显微成像系统中的关键功能&#xff0c;通常由显微镜的电动调焦模块或特定的镜头系统提供&#xff0c;而工业相机则主要用于高分辨率图像的采集&#xff0c;不具备独立的自动对焦功能。以下是自动对焦的工作原理、实现方式及实际应用案例。 1. 自动对焦的工作原理 &a…

ReactPress与WordPress:两大开源发布平台的对比与选择

ReactPress与WordPress&#xff1a;两大开源发布平台的对比与选择 在当今数字化时代&#xff0c;内容管理系统&#xff08;CMS&#xff09;已成为各类网站和应用的核心组成部分。两款备受欢迎的开源发布平台——ReactPress和WordPress&#xff0c;各自拥有独特的优势和特点&am…

京东商品详情,Python爬虫的“闪电战”

在这个数字化的时代&#xff0c;我们每天都在和数据打交道&#xff0c;尤其是电商数据。想象一下&#xff0c;你是一名侦探&#xff0c;需要快速获取京东上某个商品的详细信息&#xff0c;但是没有超能力&#xff0c;怎么办&#xff1f;别担心&#xff0c;Python爬虫来帮忙&…

np.zeros_like奇怪的bug

import numpy as np aa np.array([[1,2,3],[2,3,3]]) cc np.random.randn(2,3) print(aa) print(cc)bb np.zeros_like(aa) print(bb)for i in range(bb.shape[0]):for j in range(bb.shape[1]):bb[i,j] cc[i,j]print(bb)结果如下 这里发现这个bb的结果是没有赋值的 正确做…

【时间之外】IT人求职和创业应知【34】-人和机器人,机器人更可靠

目录 新闻一&#xff1a;人形机器人产业持续高速增长&#xff0c;2026年中国市场规模将突破200亿元 新闻二&#xff1a;AI技术驱动设备厂商格局变化&#xff0c;部分厂商市占率快速提升 新闻三&#xff1a;华为与江淮汽车携手打造超高端品牌“尊界”&#xff0c;计划于明年春…