vue实现简单计算商品价格
2020-09-16 04:08
766 查看
本文实例为大家分享了vue实现简单计算商品价格的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 700px; text-align: center; } tr, th { height: 40px; } </style> <script src="../vue.js"></script> </head> <body> <div class="box"> <table cellspacing='0' border="solid 1px"> <thead> <tr> <th>全选<input type="checkbox" v-model='isAllChecked'></th> <th>id</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>小计价格</th> </tr> </thead> <tbody> <tr v-for='item in goods'> <td><input type="checkbox" v-model='item.isCheck'></td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.num}}</td> <!-- 计算每个商品的价格根据选中的状态 --> <td>{{goodsPrice(item)}}元</td> </tr> <tr> <td colspan="6">商品总价:{{total}}元</td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el: '.box', methods: { // 商品小计 goodsPrice(item) { var sum = 0; // 选中就计算价格 if (item.isCheck) { sum = item.price * item.num; } return sum; } }, data: { goods: [ { id: 20200925, name: '苹果', price: 3, num: 12, isCheck: false, }, { id: 20200945, name: '香蕉', price: 2, num: 33, isCheck: false, }, { id: 20200935, name: '橘子', price: 4, num: 44, isCheck: false, }, ] }, computed: { isAllChecked: { /* this.goods.every(el=>el.isCheck)返回结果为true 或者false 遍历下方每一个isCheck的状态、 1、 都选中返回true---------即全选为true, 2、 有一个没选中返回false---即全选为false */ get() { return this.goods.every(el => el.isCheck) }, set(val) { // 全选的状态true、false两种状态 console.log(val); // val为true即全选的时候、下方每一个isCheck也是true // val为false即全选的时候、下方每一个isCheck也是false return this.goods.forEach(el => el.isCheck = val); } }, // 根据选中状态计算商品的价格 total() { var sum = 0; this.goods.forEach(el => { if (el.isCheck) { sum += el.price * el.num; } }) return sum; }, } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- vue 简单实现价格的计算
- 简单实现商品库存修改,统计全部库存数量和计算所有库存货物的总金额
- vue2.0中vue-cli实现全选、单选计算总价格的实例代码
- vue实现商品加减计算总价的实例代码
- vue-cli中实现全选、单选计算总价格(vue2.0)
- c#入门:简单的数组,编写一个程序,接收每件商品的价格,计算应付的总金额并输出
- js购物车选中商品实现计算商品总价格
- vue实现简单实时汇率计算功能
- 【前端】Vue.js实现简单价格计算器
- JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
- Vue+Bootstrap实现商品的增删计算案例
- Vue实现购物车的全选、单选、显示商品价格代码实例
- 实现网页购物车功能,完成基本的商品价格计算等功能
- vue实现购物车商品单选、全选及商品数量和总价计算
- Vue实现购物车的全选、单选、显示商品价格
- Vue实现简单ToDoList
- java学习17-采用数组、循环实现简单商品库存信息的查询与更改案列
- 在vue中实现简单页面逆传值的方法
- 理解vue实现原理,实现一个简单的Vue框架
- Java实现海明距离简单计算