web购物车案例

淡淡的烟草味﹌ 2023-10-05 08:48 67阅读 0赞

购物车案例实现  
准备工作  
index.HTML  
连接css文件

连接js文件 框架搭建: 书籍名称 出版日期 价格 购买数量 操作 : \{ \{item.id\}\} \{ \{item.name\}\} \{ \{item.data\}\} \{ \{item.price | showPrice\}\} - \{ \{item.count\}\} + 移除 因为在遍历时每列的元素还要进行个别处理，所以在显示时采用进行显示 style.css样式 table\{ border: 1px solid \#e9e9e9; border-collapse: collapse; border-spacing: 0; \} tr,td\{ padding: 8px 16px; border: 1px solid \#E9E9E9; text-align: left; \} th\{ background-color: \#f7f7f7; color: \#5c6b77; font-weight: 600; \} index.js data传入数组 data:\{ books:\[ \{ id:1, name:'《算法导论》', data:'2006-9', price:85.00, count:1 \}, \{ id:2, name:'《UNIX的编程艺术》', data:'2006-2', price:59.00, count:1 \}, \{ id:3, name:'《编程珠玑》', data:'2008-10', price:39.00, count:1 \}, \{ id:4, name:'《代码大全》', data:'2006-4', price:128.00, count:1 \}\] filters过滤器：过滤器中可以定义一个方法 filters:\{ showPrice(price)\{ return '￥'+ price.toFixed(2) \} \} 过滤器的使用，在要使用过滤器的元素后增加 | ，然后加上过滤器列的修改count + - 的点击触发事件 要求： 点击每列的+ - 按钮，可以对应的修改count值，并且在count<=1时，按钮 - 不可以再被触发点击每列的+ - 按钮，可以实现count的变化，这时就应该使用到index首先在button按钮中增加@click事件，分别指定函数increment（）、decrement（），因为要使用index来识别各列，所以要传入参数index

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关基于jQuery------购物车案例

目录基于jQuery------购物车案例案例：购物车案例模块-增减商品数量分析案例：购物车案例模块-修改商品小计分析案例：购物车案例模块-计算总计和总额

╰半橙微兮°/ 2024年03月22日 11:22/ 0 赞/ 69 阅读

相关 web购物车案例

购物车案例实现准备工作 index.HTML 连接css文件连接js文件框架搭建: 书籍名称出版日期价格购买数量操作 : \{ \{item.id\

淡淡的烟草味﹌/ 2023年10月05日 08:48/ 0 赞/ 68 阅读

相关 Vue小小案例——购物车

实现购物车结算功能，效果图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

落日映苍穹つ/ 2023年06月07日 12:09/ 0 赞/ 163 阅读

相关 Web全栈~17.购物车案例(JavaScript动态效果)

Web全栈~17.购物车案例(JavaScript动态效果) [上一期][Link 1] 前言前三期已经对购物车的样式绘制完毕,那么这一期就用

不念不忘少年蓝@/ 2023年01月07日 12:26/ 0 赞/ 130 阅读

相关 Web全栈~14.购物车案例(导航栏)

Web基本笔记~14.购物车案例(导航栏) [上一期][Link 1] 样式初始化 body,div,h1,h2,h3,h4,h5,h6,li,ol,

妖狐艹你老母/ 2023年01月07日 03:46/ 0 赞/ 121 阅读

相关 Web全栈~16.购物车案例(页面样式完结)

Web全栈~16.购物车案例(页面样式完结) [上一期][Link 1] 前言关于购物车的案例在前两期主要是针对浮动和定位的一些练习，因此是画

一时失言乱红尘/ 2022年11月19日 11:25/ 0 赞/ 165 阅读

相关 vue简单购物车案例

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

叁歲伎倆/ 2022年10月26日 01:21/ 0 赞/ 307 阅读

相关 vue基础小案例——购物车

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8

秒速五厘米/ 2021年10月26日 13:32/ 0 赞/ 412 阅读

相关【JavaWeb基础】购物车案例(修订版)

前言 > 只有光头才能变强。 > > 文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

灰太狼/ 2021年09月30日 23:06/ 0 赞/ 456 阅读

相关购物车案例【简单版】

前言 > 为了巩固MVC的开发模式，下面就写一个购物车的小案例.. ①构建开发环境导入需要用到的开发包 ![640?wx\_fmt=png][640_wx

柔情只为你懂/ 2021年09月30日 17:54/ 0 赞/ 429 阅读