Vue实现购物车计算总价功能
更新时间:2022年04月14日 17:06:47 作者:coder_wb
这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用Vue实现一个购物车计算总价的功能,供大家参考,具体内容如下
代码
html
<div id="app"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">购物车</h3> </div> <div class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" v-model="checkAll"> 全选 </label> </div> <ul class="list-group"> <li class="list-group-item" v-for="(item) in list" :key="item.id"> <div class="checkbox"> <label> <input type="checkbox" v-model="item.checked"> {{item.name}}--{{item.price}}*{{item.quantity}} <button type="button" @click="item.quantity>1?item.quantity-=1:1" class="btn btn-success">-</button> <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button> </label> </div> </li> </ul> <p>总价:{{sumPrice}}</p> </div> </div> </div>
js
<script src="./libs/vue.js"></script> <script> new Vue({ el: "#app", data: { list: [ { id: 1, name: "小米10", price: 3999, checked: false, quantity: 1 }, { id: 2, name: "荣耀30", price: 2999, checked: false, quantity: 1 }, { id: 3, name: "魅族17", price: 3699, checked: false, quantity: 1 }, { id: 4, name: "苹果11", price: 5499, checked: false, quantity: 1 } ], }, // computed计算属性, // 他有一个特点,可以依赖当前数据改变之后进行重新计算 computed: { checkAll: { //设置值,当点击全选按钮的时候触发 set(v) { this.list.forEach((item) => (item.checked = v)) }, //取值,当列表中的值改变之后触发,需要return get() { return ( this.list.length === this.list.filter((item) => item.checked).length ) } }, //计算总价,选择被选中的元素 sumPrice() { return this.list.filter((item) => item.checked).reduce((pre, cur) => { return pre + cur.price * cur.quantity }, 0) }, }, methods: { save() { console.log(this.list.filter((item) => item.checked)) } } }) </script>
结构是用bootstrap写的,记得下载并引入文件
<link rel="stylesheet" href="./bootstrap.min.css" >
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vuex中store存储store.commit和store.dispatch的区别及说明
这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09VUE3使用Element-Plus时如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage时使用默认的size无法满足我们的需求时,我们可以自定义字体的大小,但是直接重写样式后,并没有起作用,甚至使用::v-deep深度选择器也没有效果,本文介绍VUE3使用Element-Plus时如何修改ElMessage中的文字大小,感兴趣的朋友一起看看吧2023-09-09vue转electron项目及解决使用fs报错:Module not found: Error: Can&apo
这篇文章主要给大家介绍了关于vue转electron项目及解决使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论