Vue实现购物车计算总价功能
作者: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" >
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。