Vue学习day_02

水果店的案例:

 要求:

可以动态删除 一个对个数的修改,以及点击全选的时候,水果前面的按钮都要标记为选中,要把价格,结算的个数等都要动态变化出来.

分析:

1:渲染功能:

v-if进行条件的判断,要是数组里面有数据的话,就把主页面显示出来,要是没数据的话,就显示另外一个盒子v-else

v-for 进行循环产生数据

每一行的模板都是一样的,就是数据不一样,那就变一下数据就行了,其他都保持一致

v-for="(item, index) in fruitList " :key="item.id"
:class修改样式

对每一行进行监控,看看是否被选中isChecked,选中的话就加上active这个class, 这个class是让这一行的背景颜色变得浅灰色的, :class的用法 {}里面写的这个类名为false,还是true,要是true的话 就加上这个class反之就除去

:class="{active: item.isChecked}"

2.删除功能: 

点击传参数,filter过滤覆盖原数组,写的时候一定要加上this, filter参数的介绍,filter(数组里面其中的一个元素 => 保留这个当前元素满足的条件),有点类似于foreach

<button @click="del(item.id)" class="del">删除</button>
  methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id != id)}},

3.修改个数: 

对加减按钮做一个点击的监听,要是加的话,数++,减的话--, 需要注意的话,要是减的话,不能低于1,这里用到了 :disabled = "数和1的关系", disabled为true了就表示这个按钮不能用,也就是被禁了

在Vue中,可以使用:disabled绑定属性来动态地设置表单元素的禁用状态。:disabled绑定属性有两种写法,分别是v-bind:disabled和简写的:disabled。

   <button :disabled="item.num <= 1" @click="item.num--">-</button><span>{{item.num}}</span><button @click="item.num++">+</button>

4.全选反选: 

计算属性computed 完整的写法get/set

.every的用法:

.every()方法用于判断一个数组中的所有元素是否都满足指定的条件。

.every((num => num 满足什么条件))

示例代码:
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // 输出 true
 .foreach的用法:

.forEach()方法用于对数组中的每个元素执行一次指定的函数。.foreach((num) => {想让每个数据做什么})

示例代码:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {console.log(num);
});

给每个按钮进行双向绑定v-model 

   <div class="td"><input type="checkbox" v-model="item.isChecked"></div>
   isAll: {//默认的是只能获取 不能设置//全部的都选中才全选 -> everyget() {return this.fruitList.every(item => item.isChecked)},set(value) {//拿到布尔值 让全部的小选框 同步状态//这个也算是forEach的遍历了this.fruitList.forEach(item => item.isChecked = value)}},

5.统计选中的总价和总个数: 

统计,就是计算属性computed reduce条件求和,只有被选中之后才把这个里面的数据给求和

computed是用于定义计算属性的一个选项。计算属性是一种根据现有的数据计算得出的属性,它们的值会根据依赖的数据的变化而自动更新。需要注意的是,reduce()方法不会修改原始数组,而是返回一个新的累计值。

reduce的用法:

用于对数组中的元素进行累积计算。

reduce示例代码:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {return accumulator + currentValue;
}, 0);
console.log(sum); // 输出15

在 reduce() 方法中,accumulator(累计值)是回调函数中的一个参数,表示上一次回调的返回值,也就是累计值
在使用 reduce() 方法时,初始值或者上一次回调的返回值会被赋给 accumulator。然后,回调函数会对当前值进行处理,并将结果返回作为下一次回调的累计值,以此类推。 

   computed: {//统计总数totalCount() {//注意 加的是选中的return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num} else {return sum}}, 0)},//统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)}},

6.持久化到本地: 

watch监视,localStorage, JSON.stringify, JSON.parse

watch 是一个用于监听某个数据变化的功能。当被监听的数据发生变化时,watch 会自动执行对应的回调函数。

watch 和 v-model 都可以用于实现数据的动态变化。

虽然它们都可以用于监听数据的变化,但它们的应用场景和使用方式有所不同。
v-model 主要用于在表单元素(如输入框、复选框、下拉列表等)和数据属性之间建立双向绑定关系。当用户在表单元素中输入内容时,数据属性会自动更新;反之,当数据属性的值发生变化时,表单元素会自动更新显示。这使得用户输入和数据的动态变化保持同步。watch 则更适用于在数据发生变化时执行一些自定义的操作。通过 watch,你可以监听指定的数据属性,并在其变化时执行相应的回调函数。

总体代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}#app {width: 100%;}.main {width: 100%;/* height: ; */}.tr {float: left;width: 16%;/* border: 1px solid skyblue; */text-align: center;padding-top: 40px;}.empty {width: 100%;color: #c6c6c6;font-size: 40px;text-align: center;/* margin-top: 100px; */}.table {width: 100%;height: 100px;/* background-color: pink; */}.td {width: 16%;float: left;line-height: 100px;text-align: center;}.tbody {width: 100%;height: 140px;margin-bottom: 10px;}.td img {width: 100%;height: 100px;}.active {background-color: #f5f7fb;}.tbody button {width: 60px;height: 40px;font-size: 20px;}.left {margin-left: 125px;float: left;}.right {float: right;}.right p {display: inline;color: red;font-size: 30px;}.del {background-color: #e5473b;border: none;color: white;}</style>
</head><body><div id="app"><div class="main" v-if="fruitList.length > 0"><div class="table"><div class="thread"><div class="tr">选中</div><div class="tr">图片</div><div class="tr">单价</div><div class="tr">个数</div><div class="tr">小计</div><div class="tr">操作</div></div></div><div class="tbody" :class="{active: item.isChecked}" v-for="(item, index) in fruitList " :key="item.id"><div class="td"><input type="checkbox" v-model="item.isChecked"></div><div class="td"><img :src="item.icon" alt=""></div><div class="td">{{item.price}}</div><div class="td"><!-- 这个需要注意的是 当数量小于等于1的时候减号按钮要被禁掉 --><button :disabled="item.num <= 1" @click="item.num--">-</button><span>{{item.num}}</span><button @click="item.num++">+</button></div><div class="td">{{item.price * item.num}}</div><div class="td"><button @click="del(item.id)" class="del">删除</button></div></div><div class="sum"><div class="left"><input type="checkbox" v-model="isAll">全选</div><div class="right">总价: ¥ <p>{{totalPrice}}</p><buttonstyle="background-color: #3781fe; border: none; width: 80px; height: 30px; color: white;">结算({{totalCount}})</button></div></div></div><div class="empty" v-else>🛒空空如也</div></div><script src="../vue.js"></script><script>const defaultArr = [{id: 1,icon: '../images/水果1.png',isChecked: true,num: 2,price: 6},{id: 2,icon: '../images/水果2.png',isChecked: false,num: 7,price: 20},{id: 3,icon: '../images/水果3.png',isChecked: true,num: 4,price: 12},]const app = new Vue({el: '#app',data: {fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id != id)}},watch: {fruitList: {deep: true,handler(newValue) {//需要把变化后的数据 存取到本地里面(转JSON)localStorage.setItem('list', JSON.stringify(newValue))}}},computed: {isAll: {//默认的是只能获取 不能设置//全部的都选中才全选 -> everyget() {return this.fruitList.every(item => item.isChecked)},set(value) {//拿到布尔值 让全部的小选框 同步状态//这个也算是forEach的遍历了this.fruitList.forEach(item => item.isChecked = value)}},//统计总数totalCount() {//注意 加的是选中的return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num} else {return sum}}, 0)},//统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)}},})</script>
</body></html>

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

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

相关文章

【Java基础系列】body参数前后端不一致

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

一文详解Ehcache

Ehcache 快速入门 EhCache 是一个纯 Java 的进程内缓存框架&#xff0c;具有快速、精干等特点&#xff0c;是 Hibernate 中默认的 CacheProvider。 img 一、简介 Ehcache 虽然也支持分布式模式&#xff0c;但是分布式方案不是很好好&#xff0c;建议只将其作为单机的进程内缓存…

CAS-手写自旋锁

CAS与自旋锁&#xff0c;借鉴CAS思想 什么是自旋锁&#xff1f; CAS是实现自旋锁的基础&#xff0c;CAS利用CPU指令保证了操作的原子性&#xff0c;以达到锁的效果&#xff0c;至于自旋 锁---字面意思自己旋转。是指尝试获取锁的线程不会立即阻塞&#xff0c;而是采用循环的…

【CSAPP】探究BombLab奥秘:Phase_2的解密与实战

&#x1f4cb; 前言 ​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《斯坦福大学之CSAPP》⏰诗赋清音&#xff1a;桃花灼灼春风暖&#xff0c;心随乐曲扬徐徐。 苦尽甘来梦未阑&#xff0c;岁月长河任舟游。 ​ &#x1f389;欢迎…

来来来,带你实现最炫酷的卡片效果

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

掌汇云 | 公司库聚合企业,为垂直领域提供产品与服务展示窗口

11月29日晚&#xff0c;拼多多美股盘中市值首次超越阿里巴巴。拼多多是赢了&#xff0c;但也有人说阿里未必就输了&#xff0c;因为阿里拼的是整个阿里生态。 阿里生态使其庞大且屹立不倒&#xff0c;拼多多将社交用于撮合交易&#xff0c;通过平台连接消费者和供应商&#xf…

【没有哪个港口是永远的停留~论文简读】HRNet+OCR

一、Deep High-Resolution Representation Learning for Human Pose Estimation &#xff08;HRNet&#xff09; 论文&#xff1a;https://arxiv.org/pdf/1902.09212.pdf 代码&#xff1a;https://github.com/leoxiaobin/deep-high-resolution-net.pytorch 二、Deep high-res…

JVM篇:JVM的简介

JVM简介 JVM全称为Java Virtual Machine&#xff0c;翻译过来就是java虚拟机&#xff0c;Java程序&#xff08;Java二进制字节码&#xff09;的运行环境 JVM的优点&#xff1a; Java最大的一个优点是&#xff0c;一次编写&#xff0c;到处运行。之所以能够实现这个功能就是依…

ctf_show(web入门笔记)持续更新中

信息收集 1-2&#xff1a;查看源代码 3&#xff1a;bp抓包 4&#xff1a;robots.txt&#xff08;这个文件里会写有网站管理者不想让爬虫的页面或其他&#xff09; 5&#xff1a;网站源代码泄露index.phps 6&#xff1a;同样也是源码泄露&#xff0c;&#xff08;拿到以后还…

C++力扣题目347--前k个高频元素

给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2]示例 2: 输入: nums [1], k 1 输出: [1] 提示&#xff1a; 1 < nums.length < 105k 的取…

别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼!

可能平常会遇到一些需求&#xff0c;比如构建菜单&#xff0c;构建树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理。 我们一起来看看&#x…

Nginx直播服务器搭建及推拉流测试

文章目录 前言一、搭建 Nginx 直播服务器1、安装 Nginx 依赖2、下载并解压源码①、下载并解压 nginx-http-flv-module 直播模块源码②、下载并解压 Nginx 源码 3、编译安装4、配置 rtmp 服务①、添加 rtmp 服务②、验证配置 二、推流、拉流测试1、ffmepg 推流2、VLC 拉流 前言 …

案例224:基于微信小程序的餐厅点餐系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

基于Java Swing的图书管理系统

一、项目总体架构 本项目基于Java Swing框架&#xff0c;数据库采用的是MySQL。项目文件夹如下&#xff1a; 二、项目截图 1.登录和注册界面 2.用户界面 3.管理员管理图书类别 4.管理员管理书籍 5.管理员管理用户 项目总体包括源代码和课程论文&#xff0c;需要源码的…

OCP NVME SSD规范解读-3.NVMe管理命令-part2

NVMe-AD-8&#xff1a;在某些情况下&#xff08;如Sanitize命令、Format NVM命令或TCG Revert方法后数据被清除&#xff09;&#xff0c;设备应允许读取已清除的LBAs而不产生错误&#xff0c;并在最后一次清除完成后&#xff0c;对未写入LBAs的读取返回所有零值给主机 NVMe-AD…

教育数字化:重塑新时代教育模式及教育理念

2023年&#xff0c;是加快教育强国建设新篇章的重要一年。在这一年里&#xff0c;ChatGTP、教育数字化、自主学习等成为年度教育热词&#xff0c;“教育数字化”&#xff0c;不仅是今年教育发展的关键词&#xff0c;同时也是重塑新时代教育模式及理念的基础。 2023年2月&#…

IPEmotion数据采集软件功能介绍

IPEmotion作为IPETRONIK的软件产品&#xff0c;主要应用于车辆测试和不同的实验室测试系统&#xff0c;能够满足各种测量需求。通过专业化的数据采集软件IPEmotion&#xff0c;我们可实现完整的数据采集过程&#xff0c;包括&#xff1a;配置数据采集设备&#xff1b;使用不同的…

C语言实现RSA算法加解密

使用c语言实现了RSA加解密算法&#xff0c;可以加解密文件和字符串。 rsa算法原理 选择两个大素数p和q&#xff1b;计算n p * q;计算φ(n)(p-1)(q-1)&#xff1b;选择与φ(n)互素的整数d&#xff1b;由de1 mod φ(n)计算得到e&#xff1b;公钥是(e, n), 私钥是(d, n);假设明…

c# listbox 添加图标和文字

给listbox 添加 DrawItem 事件 private void listBox1_DrawItem(object sender, DrawItemEventArgs e){int index e.Index;//获取当前要进行绘制的行的序号&#xff0c;从0开始。Graphics g e.Graphics;//获取Graphics对象。Rectangle bound e.Bounds;//获取当前要绘制的行的…

CorelCAD各版本安装指南

下载链接 https://pan.baidu.com/s/1v0VgYRaaRRUeAgJC__0rPw?pwd0531 1.鼠标右击【CorelCAD2023(64bit)】压缩包&#xff08;win11及以上系统需先点击“显示更多选项”&#xff09;选择【解压到 CorelCAD2023(64bit)】。 2.打开解压后的文件夹&#xff0c;鼠标右击【CorelCA…