vue --- 购物车页面

下面我看开始自己写一个购物车的页面.
我们希望得到如下的效果:
在这里插入图片描述
说明:

  1. 购买数量最小为0
  2. 购买数量变化时,对应的总价随之变化
  3. 点击移除操作对应的商品会移除掉,总价随之改变
  4. 每个商品作为一个list表的一个对象
  5. 每个对象,包含id、name、price、count等属性

index.html (整体代码最后给出)

  1. 导入依赖(从上往下)

    // 样式表
    <link rel="stylesheet" style="text/css" href="style.css">
    // vue的cdn
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    // js
    <script src="index.js"></script>
    
  2. 表格 (表头+表身)
    我们希望,所有商品移除时,显示购物车为空的页面,否则就显示正常的页面

    // 依赖
    <template v-if="list.length">     // 根据商品的长度判断购物车是否为空
    </template>   // template是vue内置的一个html元素,它在编译后不会显示在Html页面里面
    <div v-else>购物车为空</div>
    
    // 表头
    <tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th>
    </tr>
    
    // 表身
    // 这个地方需要注意的是在商品数量为0时, “-”将无效
    <template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td>// 数量为0时,减号按钮将失效使用 :disable= "item.count ==='0' " 将其禁用// 数量属性,左右2边,分别有一个减少和增加按钮 使用<button>@click绑定对应方法// 传递给对应方法时,需要给出当前操作的数量的序号,此处选择的是index,(ps:若传item.id,按不同顺序删除的时候,将导致商品的编号和在list中的位置不一致)<td>  // 数量<button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)" >+</button></td><td> // 移除操作<button @click="handleRemove(index)">移除</button></td></tr>
    </template>
    
  3. 整体代码(index.html)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车示例</title><link rel="stylesheet" type="text/css" href="style.css">
</head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></tbody></table><div>总价: ¥{{ totalPrice }}</div></template><div v-else>购物车为空</div></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="index.js"></script>
</body></html>

index.js

需要注意:价格每格3位数,就会显示一个","需要:

// 正则
total.toString().replace(/\B(?=(\d{3})+$)/g, ',')

移除按钮,实际上是对list进行删除操作.可以使用js的splice.(i,1);

this.list.splice(i, 1)  ; // 在vue中使用this可以访问上面定义的数据
// index.js
var app = new Vue({el: '#app',data: {list: [{id: 1,name: 'iPhone 7',price: 6188,count: 1},{id: 2,name: 'iPad Pro',price: 5888,count: 1},{id: 3,name: 'MacBook Pro',price: 21488,count: 1}]},computed: {totalPrice: function() {var total = 0;for (var i = 0; i < this.list.length; i++) {var item = this.list[i];total += item.price * item.count;}return total.toString().replace(/\B(?=(\d{3})+$)/g, ',') }},methods: {handleReduce: function(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}}
});

此时的效果如下:
在这里插入图片描述
还缺少样式.下面附上样式的代码

style.css

// style.css
[v-cloak] {display: none;
}table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;empty-cells: show;
}th,
td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp;
}

以上为了以后大项目开发而分开写的,也可以向下面这样放在一起:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车示例</title><style>[v-cloak] {display: none;
}table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;empty-cells: show;
}th,
td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp;
}</style>
</head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></tbody></table><div>总价: ¥{{ totalPrice }}</div></template><div v-else>购物车为空</div></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script >var app = new Vue({el: '#app',data: {list: [{id: 1,name: 'iPhone 7',price: 6188,count: 1},{id: 2,name: 'iPad Pro',price: 5888,count: 1},{id: 3,name: 'MacBook Pro',price: 21488,count: 1}]},computed: {totalPrice: function() {var total = 0;for (var i = 0; i < this.list.length; i++) {var item = this.list[i];total += item.price * item.count;}return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')}},methods: {handleReduce: function(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}}
});</script>
</body></html>

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

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

相关文章

vue --- 从模块从父元素获取数据

vue的精彩之处在于其组件的可复用性.下面谈谈组件(component)如何从父元素获取数据 模块引用 首先说说,如何引用模块 <div id"app"><my-component ></my-component> </div> <script src“unpkg.com/vue/dist/vue.min.js”> </…

前端知识总结(一)

1、用原生JS实现forEach if(!Array.prototype.forEach) {Array.prototype.forEach function(fn, context) {var context arguments[1];if(typeof fn ! "function") {throw new TypeError(fn "is not a function");}for(var i 0; i < this.length; …

vue --- 模块从子组件获取数据

先看个一般的例子: // 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过来关联父元素。如下:<div id "app"><transfer connect"sayConnect" build"sayBuild"&g…

mySql配置在nodejs中使用

mySql安装完成后&#xff0c;配置链接nodejs项目中的数据库。 1、测试是否安装成功。 2、use nodejs使用nodejs 3、设置数据源 5、exit 转载于:https://www.cnblogs.com/zhxzh/p/9244996.html

前端知识总结(二)

33、闭包 闭包的概念 上一节代码中的f2函数&#xff0c;就是闭包。 各种专业文献上的"闭包"&#xff08;closure&#xff09;定义非常抽象&#xff0c;很难看懂。我的理解是&#xff0c;闭包就是能够读取其他函数内部变量的函数。 由于在Javascript语言中&#x…

前端知识总结(三)

51、启动GNU加速 硬件加速的工作原理 浏览器接收到一个页面之后&#xff0c;将html解析成DOM树&#xff0c;浏览器解析渲染「html」的过程 按着一定的规则执行&#xff0c;DOM树和CSS树结合后构成浏览器形成页面的 渲染树 ; 渲染树中包含大量的渲染元素&#xff0c;每一个元素…

为阿里云服务器ECS实例安装Nodejs

为阿里云服务器ECS实例安装Nodejs部署Node.js项目&#xff08;CentOS&#xff09;准备工作操作步骤步骤1&#xff1a;部署Node.js环境&#xff08;使用二进制文件安装&#xff09;步骤2&#xff1a;部署测试项目部署Node.js项目&#xff08;CentOS&#xff09; 本文档介绍如何…

webstorm激活+汉化教程

1.安装教程激活 输入的激活网址&#xff1a; http://idea.imsxm.com/ 2.汉化教程 软件适用于&#xff1a;webstorm2017.2以及以上&#xff0c;如有需要可直接加本人QQ 1940694428。 转载于:https://www.cnblogs.com/cisum/p/7919712.html

如何从零开始,成为element-plus的contributor

序言 提到element-ui&#xff0c;我想很多前端er应该都不陌生&#xff0c;而element-ui也是我第二个使用的前端UI库&#xff0c;第一个是bootstrap&#xff08;笑&#xff09;。我是在去年初学vue的时候开始接触elemment-ui的&#xff0c;到现在也快一年了&#xff0c;中间经历…

将Vue+Nodejs项目部署到阿里云服务器

上传文件至云服务器 一、打包文件 在项目根目录下运行 npm run build等待命令运行结束后&#xff0c;会发现目录下多了 dist 文件夹&#xff0c;这个文件夹就是我们等下要放到服务器中的。 二、文件传输 打开 Xftp与实例建立连接云服务器Apache默认的根目录是/var/www/htm…

javascript --- 函数的优化(尾调用优化)

从一个熟悉的Fibonacci数列的实现开始: function Fibonacci (n) {if ( n < 1) { return 1};return Fibonacci(n -1) Fibonacci(n-2); }以上代码很简单… 但执行以下代码 console.log(Fibonacci(100));会发现编译工具,卡住不动. 原因在于:递归调用(函数调用自身),每次都会…

第5课 - 线性表的本质

第5课 - 线性表的本质 数据结构是为了解决生活中的实际问题而存在的&#xff0c;那生活中与线性表相对应的例子有什么呢&#xff1f; 幼儿园中就有一个例子&#xff0c;在老师安排小朋友活动时&#xff0c;会将小朋友组织成下面的站队形式&#xff0c;这个就是线性表。 1. 线性…

Django--网页管理实例解析

此篇为代码流程的注释以及自己写的小项目的思路&#xff1a; 首先是项目的路由配置&#xff1a; 1 urlpatterns [2 # url(r^admin/, admin.site.urls),3 url(r^yemian/,yemian),4 url(r^zuoye/,zuoye),5 url(r^class/,views.class_list),6 url(r^class_ad…

阿里云ecs实例中创建数据库

阿里云ecs实例中创建数据库安装mysql创建数据库1.登录2.新建数据库3.执行.sql文件4.查询表&#xff0c;验证是否创建成功4.退出数据库安装mysql 参考https://blog.csdn.net/qq_36350532/article/details/79496049 创建数据库 1.登录 mysql -u root -p&#xff08;这里写密码…

javascript --- 尾递归优化的实现

考虑一个正常的递归函数 function sum(x, y) {if (y > 0) {return sum (x 1, y - 1);} else {return x;} } sum(1, 100000000);超出调用栈的最大次数… 下面使用尾递归优化实现: function tco(f) {var value ;var active false;var accumulated [];return function acc…

《对不队》团队项目用户验收评审

任务1&#xff1a;团队作业Beta冲刺 Beta冲刺第一天&#xff1a;https://www.cnblogs.com/bingoF6/p/9221744.htmlBeta冲刺第二天&#xff1a;https://www.cnblogs.com/bingoF6/p/9226305.htmlBeta冲刺第三天&#xff1a;https://www.cnblogs.com/bingoF6/p/9230815.htmlBeta冲…

部署项目的问题(一)—— vue工程打包上线样式错乱问题

1、 打开index.html一片空白 参考&#xff1a;链接: link. 修改build对象里的assetsPublicPath为’./’ assetsPublicPath: ./2、ElementUI样式丢失 参考&#xff1a;链接: link. 这里尝试完前三种&#xff1a; 1.main.js样式引入顺序问题 调整了import的顺序&#xff08;…

构建SpringBoot第一个Demo

使用官方地址生成项目 https://start.spring.io Generate&#xff1a;可以选择Maven或者Gradle构建项目 语言&#xff1a;我想一般都是Java 接下来选择SpringBoot的版本&#xff0c;目前比较稳定的1.5.10 GroupID&#xff1a;自定义 Artifact&#xff1a;自定义 Dependencies&…

部署项目的问题(二)—— 阿里云服务器 ECS升级node版本

在运行服务端代码时报错&#xff0c;当时报错的代码没copy下来&#xff0c;大概就是如下形式 mbp:hybrid-statistic wfp$ node app.js /Users/wfp/Work/hybrid-statistic/app.js:28 async function responseTime(ctx, next) {^^^^^^^^ SyntaxError: Unexpected token function…

javascript --- Object.assign()浅复制解决方法

Object.assign()是浅复制(即:只复制对象得引用而,而不是新实例).它无法正确复制get属性和set属性. 看下面得例子: // 定义一个source对象,含set方法 const source {set foo(value) {console.log(value);} };// 使用Object.assign进行赋值 const target1 {}; Object.assign(t…