Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）

使用方法：

toFixed(2) 保留俩位小数

splice(index,howmany) 删除商品 index 规定添加删除的位置，howmany 删除几个

border-collapse: collapse; 边界折叠：折叠

border-spacing: 0; 边框间距 0

添加 disabled 将按钮在某一条件下固定（如数量小于1时，将不能执行按钮点击操作通过 :disabled=‘item.count===1’ 将按钮锁定）

v-for v-else v-bind @click 的使用

使用 forEach( e=>{ } ) 遍历数组

使用高阶函数 reduce（）来计算总价

html 代码

<div id="app"><div v-if='books.length'><table><thead><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></thead><tbody><tr v-for='(item,index) in books' :key='item.id'><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price*item.count|showPrice}}</td><!-- 点击 + - 按钮 进行数量的加减 --><td><button @click="decrement(index)" :disabled='item.count===1'>-</button>{{item.count}}<button @click="increment(index)">+</button></td><td><button @click='haddleRemove(index)'>删除</button></td></tr></tbody></table><h4> 共 {{totalCount}} 件商品 总价: {{totalPrice|showPrice}} </h4></div><div v-else>购物车已经空啦!</div></div>

引入js和css文件（js文件在body里引入，css文件在head里面引入）

<script src="../js/vue.js"></script><script src="./main.js"></script>

<link rel="stylesheet" href="./index.css">

css 样式代码：

table{border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;
}
th,td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}
th{background-color: #f7f7f7;color: #5c6b77;font-weight: 600;
}

js 代码

const app = new Vue({el: '#app',data: {books: [{id: 1,name: '《算法导论》',date: '2006-9',price: 85.00,count: 1},{id: 2,name: '《UNIX编程艺术》',date: '2006-2',price: 59.00,count: 1},{id: 3,name: '《编程珠玑》',date: '2008-10',price: 39.00,count: 1},{id: 4,name: '《代码大全》',date: '2006-3',price: 128.00,count: 1},]},methods: {increment(index) {this.books[index].count++},decrement(index) {this.books[index].count--},haddleRemove(index) {// 使用 splice(index,howmany) 方法来删除// index 规定添加删除的位置 howmany 删除几个this.books.splice(index, 1)},},computed: {totalPrice() {let total = 0for (let i = 0; i < this.books.length; i++) {total += this.books[i].price * this.books[i].count}return total},totalCount() {let count = 0for (let i = 0; i < this.books.length; i++) {count += this.books[i].count}return count}},filters: {showPrice(value) {return '￥' + value.toFixed(2)}}
})

效果图：

注：小技巧使用{{item.price*item.count}} 来计算单个商品的总价并显示在页面中

遍历数组的完善（下面的for循环过于繁杂遍历的方法还有 for in for of forEach()）小tip: 此处改为 forEach 方法：

 totalPrice() {let total = 0this.books.forEach(e => {total += e.price * e.count});return total

totalCount() {let count = 0// for (let i = 0; i < this.books.length; i++) {//   count += this.books[i].count// }this.books.forEach(e => { count += e.count })return count}

使用高阶函数 reduce（）来计算总价

 reduceTotalPrice() {// 5. 利用 reduce 方法return this.books.reduce(function (preValue, book) {return preValue + book.price * book.count}, 0)

reduce 函数的作用：对数组中所有的内容进行汇总也就是计算数组总的值

reduce 函数的使用：
reduce 第一个参数时是一个回调函数（函数里面有四个参数 total 必填是初始值或计算结束后的返回值 currentValue 必填是当前元素）
第二个参数为传递给函数的初始值可填可不填

语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）相关推荐

j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)...
第一:概念购物车全过程的理解: 1.新建一个购物车类,这样,这个类里面就可以封装商品对象和商品数量了. 2.每种商品都是一个购物车 3.把所有的购物车放在一起,也就是放在一个map集合中,这样 ...
[Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车按照组件化方式实现业务需求根据业务功能进行组件化划分标题组件(展示文本) 列表组件(列表展示.商品数量变更.商品删除) 结算组件(计算商品总额) 功能实现步骤实现整体布局和样式 ...
利用JSP与JS实现简易购物车
自己编写的一个简易购物网站示例: 示例代码运行的结果: carts.jsp文件 <%@ page contentType="text/html;charset=GBK" %& ...
Vue.js+Mysq+java+springboot+商品推荐算法实现商品推荐网站+商品管理系统后台
面对海量的商品信息如何实现针对不同用户维度开展个性化商品推荐,实现用户线上选购商品,下订单,支付,物流配送等?本次毕设程序基于前后端分离开发模式,搭建系统网络商品推荐系统前台与系统后台商品管理系统,通 ...
原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...
jQuery实现购物车功能（小计、总计）
html <html> <body><form class="buyCar"><!-- 购物车上部 ...
商品的增加删除修改和查询
运行结果: GoodsDao package com.itheima.dao;import com.itheima.pojo.Goods; import com.itheima.utils.Druid ...
knockout.js实例二~购物车
knockout.js实例二~购物车本实例完成了一个基本的购物车功能,涉及到knockout.js中的知识点包含 select 标签的绑定, select 标签的级联, with 绑定,数据格式化, ...
Vue项目实战：购物车页面实现与ElementUI集成
目录 1. 购物车页面 Order-Header组件购物车列表渲染购物车全选和非全选购物车商品更新和删除购物车结算 2. ElementUI集成 3. Babel介绍购物车页面 (1)Ord ...

Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）

Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）相关推荐

最新文章

热门文章