VUE购物车总价计算

html代码块

<div id="app"><div class="text1"><span>id</span><span>书籍名称</span><span>出版日期</span><span>购买价格($)</span><span>数量</span><span>操作</span></div><div class="list" v-for="(item,index) in users" :key="item.id"><span>{{item.id}}</span><span>{{item.book}}</span><span>{{item.day}}</span><span>{{item.money}}</span><span><button type="button" @click="jian(item)" >-</button><b>{{item.num}}</b><button type="button" @click="add(item)" >+</button></span><span><button type="button" @click="delItem(item)">移除</button></span></div><p>总价：<b>{{sum}}</b></p></div>

css代码块（自己根据内容修改）

#app{width: 800px;height: 400px;margin: 0 auto;text-align: center;border: 1px solid  #CCCCCC;}.text1{margin-top: 50px;}span{display: inline-block;width: 100px;text-align: center;margin-top: 5px;}input{width: 30px;}b{display: inline-block;width: 20px;}

js代码块(运用vue遍历更快)

<script type="text/javascript">new Vue({el:"#app",  data:{users:[{"id":1,"book":"小绿书","day":"2002-9","money":100,"num":1,},{"id":2,"book":"小红书","day":"2016-9","money":16700,"num":1,},{"id":3,"book":"发生的书","day":"2026-9","money":600,"num":1,},{"id":4,"book":"奥古斯丁","day":"2004-9","money":3455,"num":1,},{"id":5,"book":"发手动阀","day":"2046-9","money":7983,"num":1,},],},methods:{add(item){item.num+=2},jian(item){if(item.num>1){item.num--}    },delItem(item){var ind = this.users.findIndex(value=>value===item);this.users.splice(ind,1);}},computed:{sum(){var totalPrice = 0;  //临时单价this.users.forEach(function(val){totalPrice+=val.money*val.num;   });return totalPrice;}}})</script>

VUE购物车总价计算相关推荐

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善
uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善 uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善 cart.vue <template><view> ...
python计算总价_vue 实现购物车总价计算
效果如下所示: js window.οnlοad=function () { var vm = new Vue({ el:'#huo', data:{ myList:[ { number:0, pri ...
Vue购物车功能计算总价/全选/删除
要求功能实现初始页面功能1:删除点击删除操作后,整行可以被删除. 功能2:全选当所有商品都被勾选上是,全选按钮也勾上,当全选按钮勾上时,所有商品都被勾选上. 功能3:计算总价当输入商品数量 ...
vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
html购物车总价,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法
计算商品总价--计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法通过计算属性计算商品总价 allPrice() {// 计算购物车所有商品的总价格// 单价 ...
php总价,JS实现购物车中商品总价计算
JS计算购物车中商品总价,供大家参考,具体内容如下题目要求: 购物车中有若干商品信息,其中包括商品的名称.单价.数量,计算购物车中商品的总价. 具体思路: 商品信息通过创建商品对象来实现,若干商品的 ...

VUE购物车总价计算

VUE购物车总价计算相关推荐

最新文章

热门文章