Vue阶段练习：tab栏、进度条、购物车

阶段练习旨在学习完Vue 指令、计算属性、侦听器-CSDN博客后，进行自我检测，每个练习分为效果显示、需求分析、静态代码、完整代码、总结 四个部分，效果显示和准备代码已给出，我们需要完成“完整代码”部分。

目录

练习1：tab栏的动态高亮显示

效果显示

静态代码

完整代码

错误代码

总结

练习2：进度条

效果显示

静态代码

完整代码

总结

注意

练习3：购物车

效果显示

静态代码

完整代码

分析

部分错误代码

练习1：tab栏的动态高亮显示

效果显示

静态代码

<!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>022(1)练习：tab栏的active效果</title><style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}</style>
</head>
<body><div id="app"><ul><li><a class="active" href="#">京东秒杀</a></li><li><a href="#">每日特价</a></li><li><a href="#">品类秒杀</a></li></ul></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: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body>
</html>

完整代码

<!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>022(1)练习：tab栏的动态高亮显示</title><style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}</style>
</head><body><div id="app"><ul><li v-for="(item,index) in list" :key="item.id"  @click="activeIndex = index"><a  :class="{active : index===activeIndex}" href="#">{{item.name}}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 2,list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body></html>

错误代码

<li><a :class="{active : activeIndex===item.id}" v-for="(item,index) in list" :key="item.id"@click="activeIndex=id" v-model="activeIndex" href="#">{{item.name}}</a></li>

总结

  1. 列表渲染
  2. 点击事件
  3. v-bind对样式进行控制

练习2：进度条

效果显示

静态代码

<!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>022(2)练习：进度条</title><style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style>
</head>
<body><div id="app"><div class="progress"><div class="inner"><span>50%</span></div></div><button>设置25%</button><button>设置50%</button><button>设置75%</button><button>设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>
</body>
</html>

完整代码

<!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>022(2)练习：进度条</title><style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style>
</head><body><div id="app"><div class="progress"><div class="inner" :style="{width: percent+ '%' }"><span>{{percent}}%</span></div></div><button v-for="(item, index) in list" :key="index" @click="percent = item">设置{{item}}%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 25,list: [25, 50, 75, 100]}})</script>
</body></html>

总结

  1. 列表渲染
  2. 点击事件
  3. v-bind对样式进行控制：操作style

注意

:style="{width: percent+ '%' }"

如果没有将百分比值与单位分开并添加单引号，例如:style="{width: percent + %}"，那么Vue.js将会尝试将百分比值与JavaScript表达式中的%一起解析为字符串，而这不是一个有效的CSS值，会导致样式设置失败。

练习3：购物车

效果显示

静态代码

<!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" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>028练习：购物车</title>
</head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div class="tr active"><div class="td"><input type="checkbox" checked /></div><div class="td"><img src="http://autumnfish.cn/static/火龙果.png" alt="" /></div><div class="td">6</div><div class="td"><div class="my-input-number"><button class="decrease"> - </button><span class="my-input__inner">2</span><button class="increase"> + </button></div></div><div class="td">12</div><div class="td"><button>删除</button></div></div><div class="tr"><div class="td"><input type="checkbox" /></div><div class="td"><img src="http://autumnfish.cn/static/荔枝.png" alt="" /></div><div class="td">7</div><div class="td"><div class="my-input-number"><button disabled class="decrease"> - </button><span class="my-input__inner">1</span><button class="increase"> + </button></div></div><div class="td">14</div><div class="td"><button>删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span><!-- 结算按钮 --><button class="pay">结算( 6 )</button></div></div></div><!-- 空车 --><div class="empty">🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 水果列表fruitList: [{id: 1,icon: 'http://autumnfish.cn/static/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'http://autumnfish.cn/static/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'http://autumnfish.cn/static/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'http://autumnfish.cn/static/樱桃.png',isChecked: false,num: 20,price: 34,},],},})</script>
</body></html>

完整代码

<!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" /><link rel="stylesheet" href="028inputnumber.css" /><link rel="stylesheet" href="028index.css" /><title>028练习：购物车</title>
</head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="#" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div class="tr" :class="{active: item.isChecked==true }" v-for="(item, index) in fruitList" :key="item.id"><div class="td"><input type="checkbox" @click="check(index)" v-model="item.isChecked" /></div><div class="td"><img src="#" alt="" /></div><div class="td">{{item.price}}</div><div class="td"><div class="my-input-number"><button class="decrease" @click="item.num--"> - </button><span class="my-input__inner">{{item.num}}</span><button class="increase" @click="item.num++"> + </button></div></div><div class="td">{{subTotalCount(index)}}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" @click="toggleAllCheckbox" v-model="allClickFlag" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalCount}}</span></span><!-- 结算按钮 --><button class="pay">结算( {{totalKind}} )</button></div></div></div><!-- 空车 --><div class="empty" v-show="num1===0">🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {num1: 0,allClickFlag: false,// 水果列表fruitList: [{id: 1,icon: '#',isChecked: false,num: 2,price: 6,},{id: 2,icon: '#',isChecked: false,num: 7,price: 20,},{id: 3,icon: '#',isChecked: false,num: 3,price: 40,},{id: 4,icon: '#',isChecked: false,num: 10,price: 3,},{id: 5,icon: '#',isChecked: false,num: 20,price: 34,},],},methods: {subTotalCount(index) {return this.fruitList[index].num * this.fruitList[index].price},del(id) {this.fruitList = this.fruitList.filter(item => item.id != id)},check(index) {this.fruitList[index].isChecked = !this.fruitList[index].isChecked;if (this.fruitList[index].isChecked == true) this.num1++;else this.num1--;if (this.fruitList.every(item => {return item.isChecked === !this.allClickFlag;})) {this.allClickFlag = !this.allClickFlag;} else {const foundItem = this.fruitList.find(item => {return this.allClickFlag === true;});if (foundItem) {this.allClickFlag = !this.allClickFlag;}}},allClick() {const isChecked = this.allClickFlag;this.fruitList.forEach(item => {item.isChecked = isChecked;});},toggleAllCheckbox() {this.allClickFlag = !this.allClickFlag}},computed: {totalCount() {let total = this.fruitList.reduce((sum, item) => {if (item.isChecked === true) {return sum + item.num * item.price;} else {return sum;}}, 0);return total;},totalKind() {let kind = this.fruitList.reduce((sum, item) => {if (item.isChecked === true) {return sum + item.num;} else {return sum;}}, 0);return kind;}},watch: {'allClickFlag': {immediate: true,handler(newVal) {if (newVal === true) {this.fruitList.forEach(item => {item.isChecked = true;this.num1++;});} else {this.fruitList.forEach(item => {item.isChecked = false;this.num1--;});}}}},'num1': {immediate: true,handler(newVal) {if (newVal === this.fruitList.length) this.allClickFlag = true;else this.allClickFlag = false;}}})</script>
</body></html>

分析

部分错误代码

错误原因：toggleAllCheckbox 方法会切换 allClickFlag 的值，从而控制全选按钮的选中状态。但是，当用户手动取消某个待选框的选中状态时，并没有调用 toggleAllCheckbox 方法来更新 allClickFlag 的值。因此，全选按钮的状态不会根据待选框的实际状态自动更新。

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

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

相关文章

【经验分享】MySQL集群部署一：主从模式

【经验分享】MySQL集群部署一：主从模式

目录 前言一、基本介绍1.1、概念1.2、执行流程 二、部署2.1、通用配置2.2、主节点配置2.3、从节点配置2.4、主从测试2.5、谈一谈主节点历史数据同步问题 前言 MySQL的部署模式常见的包括以下几种&#xff1a; 独立服务器部署主从复制部署高可用性集群&#xff08;HA&#xff…
阅读更多...
（mac）Promethues监控之mysqld_exporter(MySQL监控)

（mac）Promethues监控之mysqld_exporter(MySQL监控)

搭建Mysqld_exporterPrometheusGrafana监控系统 普罗米修斯是后端数据监控平台&#xff0c;通过Mysqld_exporter收集mysql数据&#xff0c;Grafana将数据用图形的方式展示出来 前提&#xff1a;已安装grafana和promethues 1.下载安装Mysql &#xff08;1&#xff09;启动MySQL…
阅读更多...
基于51单片机的电梯仿真系统

基于51单片机的电梯仿真系统

基于51单片机的电梯设计 &#xff08;仿真&#xff0b;程序PPT&#xff09; 功能介绍 具体功能&#xff1a; 1.一共4层&#xff0c;数码管显示当前楼层&#xff1b; 2.六个按键模拟电梯外按键&#xff08;1上、2上、2下、3上、3下、4下&#xff09;&#xff0c;每当按下时有…
阅读更多...
循环单链表的介绍与操作

循环单链表的介绍与操作

定义 区别 链表合并 整合代码 typedef struct node{int data;node* next;; }lnode,*linklist; lnode* n; linklist l;//定义 void init(linklist &l){lnode lnew lnode;l->nextl;lnode *rl; } //单循环链表的合并 linklist merge(linklist &a,linklist b){//存头结…
阅读更多...
debian配置distcc分布式编译

debian配置distcc分布式编译

前言 distcc 是一个用于在网络上的多台机器上分发 C、C、Objective C 或 Objective C 代码构建的程序。 distcc 应始终生成与本地构建相同的结果&#xff0c;易于安装和使用&#xff0c;并且通常比本地编译快得多。 distcc 不要求所有机器共享文件系统、同步时钟或安装相同的…
阅读更多...
数据结构 - 队列 [动画+代码注释超详解]，萌新轻松上手！！！

数据结构 - 队列 [动画+代码注释超详解]，萌新轻松上手！！！

一. 队列的概念 队列是一种特殊的线性表&#xff0c;用于存储元素&#xff0c;并且按照先进先出(First In First Out)的顺序进行管理&#xff0c;这意味着最先加入队列的元素将会是最先从队列中被移除的元素 队列的原型&#xff1a;只允许在一端进行插入数据的操作&#xff0c…
阅读更多...
HTTP、模块化

HTTP、模块化

HTTP协议 包括请求行、请求头、请求体 http常见请求方法&#xff1a; url统一资源请求符&#xff0c;其本身也是一个字符串 响应体的内容格式是非常灵活的,常见的响应体格式有: 1.HTML 2.CSS 3. JavaScript 4.图片 5.视频 6.JSON 响应状态码&#xff1a; IP本身是一个数字…
阅读更多...
20240427纳米多孔石墨烯力学性能的调控

20240427纳米多孔石墨烯力学性能的调控

文献来源&#xff1a;Tuning the mechanical properties of nanoporous graphene: a molecular dynamics study DOI&#xff1a;https://orcid.org/0000-0003-3598-5439 结论&#xff1a;在这项工作中&#xff0c;使用经典MD模拟分析了扶手椅和锯齿形的NPG&#xff08;纳米多…
阅读更多...
Ubuntu2004 CMake 使用基础

Ubuntu2004 CMake 使用基础

一、环境安装 win10安装wsl ubuntu2004 #windows c盘工程目录建立软链 ln -s /mnt/c /home/vrviu/ 安装cmake、c编译工具 apt install -y cmake g 二、CMakeLists.txt讲解 准备工作 首先&#xff0c;在/home/vrviu 目录建立一个 cmake 目录 以后我们所有的 cmake 练习都会放…
阅读更多...
如何借模板助力小程序开发

如何借模板助力小程序开发

不论是奶茶店还是其他行业&#xff0c;想要开发小程序&#xff0c;乔拓云都为你提供了便捷的方案。无需复杂的编程技术&#xff0c;通过套用模板的方式&#xff0c;即可快速打造专属小程序。 在线访问乔拓云官方网站&#xff0c;免费注册账号后&#xff0c;即可进入商城小程序的…
阅读更多...
RabbitMQ知识点总结（一）

RabbitMQ知识点总结（一）

为什么要使用RabbitMQ? 异步&#xff0c;解耦&#xff0c;削峰。 异步 提高效率&#xff1b;一个挂了&#xff0c;另外的服务不受影响。 解耦 增加或减少服务比较方便。 削峰 每天0点到16点&#xff0c;A系统风平浪静&#xff0c;每秒并发数量就100个。结果每次到了16点到…
阅读更多...
SecretFlow学习指南（2）学习路径

SecretFlow学习指南（2）学习路径

目录 一、模块架构 二、模块详解 三、算法协议 四、学习路线 一、模块架构 良好的分层设计可以提高开发效率和可维护性&#xff0c;满足不同用户的需求。隐语从上到下一共分为六层。 ●产品层&#xff1a;通过白屏化产品提供隐语整体隐私计算能力的输出&#xff0c;让用户简…
阅读更多...
ZYNQ--PL读写PS端DDR数据

ZYNQ--PL读写PS端DDR数据

PL 和PS的高效交互是zynq 7000 soc开发的重中之重，我们常常需要将PL端的大量数 据实时送到PS端处理，或者将PS端处理结果实时送到PL端处理，常规我们会想到使用DMA 的方式来进行，但是各种协议非常麻烦，灵活性也比较差，本节课程讲解如何直接通过AXI总 线来读写PS端ddr的数据…
阅读更多...
【Pytorch】（十三）模型部署: TorchScript

【Pytorch】（十三）模型部署: TorchScript

文章目录 &#xff08;十三&#xff09;模型部署: TorchScriptPytorch动态图的优缺点TorchScriptPytorch模型转换为TorchScripttorch.jit.tracetorch.jit.scripttrace和script的区别总结trace 和script 混合使用保存和加载模型 &#xff08;十三&#xff09;模型部署: TorchScr…
阅读更多...
掌静脉识别关键技术研究综述

掌静脉识别关键技术研究综述

掌静脉识别作为一种新兴的红外生物识别技术&#xff0c;因其高安全性、活体检测性等优势已成为当前生物特征识别领域中的研究热点之一。近年来&#xff0c;该领域的大量研究通过引入深度学习方法推动了掌静脉识别技术的发展。为了掌握掌静脉识别领域最新研究现状及发展方向&…
阅读更多...
ddos云服务器有哪些防御方法和优势

ddos云服务器有哪些防御方法和优势

本文将介绍云服务器遇到DDoS攻击的应对方法&#xff0c;包括流量清洗、负载均衡、防火墙设置和CDN加速等。同时&#xff0c;文章还介绍了ddos云服务器的防御优势&#xff0c;包括高防护能力、自动化防御、实时监控和报警以及弹性扩展等。通过这些防御方法和ddos云服务器的应用&…
阅读更多...
React复习笔记

React复习笔记

基础语法 创建项目 借助脚手架&#xff0c;新建一个React项目(可以使用vite或者cra&#xff0c;这里使用cra) npx create-react-app 项目名 create-react-app是React脚手架的名称 启动项目 npm start 或者 yarn start src是源文件index.js相当于Vue的main.js文件。整个…
阅读更多...
vue3 ——笔记 (条件渲染，列表渲染，事件处理)

vue3 ——笔记 (条件渲染，列表渲染，事件处理)

条件渲染 v-if v-if 指令用于条件性地渲染一块内容&#xff0c;只有v-if的表达式返回值为真才会渲染 v-else v-else 为 v-if 添加一个 else 区块 v-else 必须在v-if或v-else-if后 v-else-if v-else-if 是v-if 的区块 可以连续多次重复使用 v-show 按条件显示元素 v-sh…
阅读更多...
【Linux系统化学习】生产者消费者模型（阻塞队列和环形队列）

【Linux系统化学习】生产者消费者模型（阻塞队列和环形队列）

目录 生产者消费者模型 什么是生产者消费者模型 为什么要使用生产者消费者模型 生产者消费者模型的优点 为什么生产者和生产者要互斥&#xff1f; 为什么消费者和消费者要互斥&#xff1f; 为什么生产者和消费者既是互斥又是同步&#xff1f; 基于BlockingQueue的生产者…
阅读更多...
26版SPSS操作教程（高级教程第十六章）

26版SPSS操作教程（高级教程第十六章）

目录 前言 粉丝及官方意见说明 第十六章一些学习笔记 第十六章一些操作方法 多维尺度分析 不考虑个体差异的多维尺度分析模型 假设数据 具体操作 结果解释 选择不同距离的排列方式 考虑个体差异的多维尺度分析模型&#xff08;INDSCAL&#xff0c;individual differ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023