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; 四、频率与概率 五、练习

Elman 神经网络算法详解

Elman 神经网络算法详解 一、引言 Elman 神经网络作为一种经典的递归神经网络&#xff08;RNN&#xff09;&#xff0c;在处理动态系统和时间序列数据方面具有独特的优势。它通过特殊的结构设计&#xff0c;能够有效地捕捉数据中的时间依赖关系&#xff0c;在语音识别、自然语…

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…

沃德校园跑腿助手:助力校园团队数字化管理

随着互联网技术的不断发展&#xff0c;校园生活也逐渐进入了智能化、数字化的新时代。从日常学习到生活服务&#xff0c;线上化已成为学生和校园团队的普遍需求。而沃德校园跑腿助手&#xff0c;正是基于FastAdminThinkPHPUniapp技术栈&#xff0c;为校园团队提供的一款高效、便…

深入探讨 MySQL 配置与优化:从零到生产环境的最佳实践20241112

深入探讨 MySQL 配置与优化&#xff1a;从零到生产环境的最佳实践 引言 MySQL 是全球最受欢迎的开源关系型数据库之一&#xff0c;其高性能、灵活性和广泛的社区支持使其成为无数开发者的首选。然而&#xff0c;部署一台高效、稳定的 MySQL 实例并非易事。本文将结合一个实际…

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

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

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

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

【JS】异步编程

我是目录 Promisenew Promise(..) 构造器如何确定promise的类型如何信任Promise链式流Promise的局限性async与awaitasyncawaitawait 等到之后,做了一件什么事情?异步编程的四种方式: 1,回调函数:先执行程序的主要逻辑,将耗时的操作推迟执行。简单、易理解,但不利于代码维…

软件设计师-软件工程

软件生存周期 可行性分析&#xff0c;可行性分析报告和项目开发计划需求分析&#xff0c;软件需求说明书&#xff0c;确定软件的综合要求&#xff1a;系统界面&#xff0c;系统功能&#xff0c;系统性能&#xff0c;安全性&#xff0c;保密性和可靠性方面的要求&#xff0c;系…

算法——移除链表元素(leetcode203)

移除链表元素首先我们要理解链表这种数据结构&#xff0c;它跟数组不一样它可以分布在内存中的各个位置链表节点由值和指针组成&#xff0c;指针指向下一个链表节点。 移除链表元素简而言之就是将符合条件的链表节点给移除出去我们不能直接将其移除而是通过将被移除节点的上一…

数字字符串格式化

小M在工作时遇到了一个问题&#xff0c;他需要将用户输入的不带千分位逗号的数字字符串转换为带千分位逗号的格式&#xff0c;并且保留小数部分。小M还发现&#xff0c;有时候输入的数字字符串前面会有无用的 0&#xff0c;这些也需要精简掉。请你帮助小M编写程序&#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…

C++设计模式精选面试题及参考答案

目录 什么是单例模式?它的应用场景是什么?如何保证单例模式线程安全? 什么是工厂方法模式?如何与简单工厂模式进行比较? 抽象工厂模式和工厂方法模式有什么区别?请给出实际应用场景。 什么是建造者模式?它和工厂模式有什么不同? 在什么情况下使用单例模式?如何在…

ios swift开发--ios远程推送通知配置

远程推送通知&#xff08;Push Notifications&#xff09;在 iOS 平台上是免费提供的&#xff0c;但需要一些准备工作。以下是开通和使用远程推送通知的基本步骤&#xff1a; 开通远程推送通知 注册 Apple Developer Program&#xff1a; 访问 Apple Developer 并注册一个开发…

关于QUERY_ALL_PACKAGES权限导致Google下架apk

谷歌商店被下架,原因是第三方使用了 QUERY_ALL_PACKAGES 权限&#xff1b; Google在高版本上限制了此权限的使用。当然&#xff0c;并不是 QUERY_ALL_PACKAGES 这个权限没有了&#xff0c;而是被列为敏感权限&#xff0c;必须有充分的理由说明&#xff0c;才允许上架 GP&#…

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

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