对于Web前端三大框架中的vue.js,相信大家应该比较熟悉了。今天给大家分享一个小DEMO应用,模拟购物车计算商品价格和总价以及单选全选功能。
功能介绍
1、列表单价计算
2、单选和全选功能
3、总价格计算
这些功能在我们电商项目中经常用到,希望大家能掌握。废话不多说,直接开始。示例图:
首先我们简单梳理下HTML,这个简单,上代码:
<div class="box"> <table cellspacing='0' border="0" cellpadding="0" width="100%"> <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>
表头固定,循环表单列表数据,这个没难度哟。
最关键的是js部分。
第一步:建立数据库
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, }, ] },
第二步:遍历数据
遍历下方每一个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; },
vuejs更多应用到ES6的语法,如果有些童鞋看不懂,可以先熟悉下es6的api。完整的DEMO。
<!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; border:solid #ddd; border-width:1px 0 0 1px; } td, th { line-height: 3; border:solid #ddd; border-width:0 1px 1px 0; } tr:nth-child(2n) td{ background-color:#f5f5f5; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="box"> <table cellspacing='0' border="0" cellpadding="0" width="100%"> <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>
大家可以预览看下效果。
网友评论文明上网理性发言 已有0人参与
发表评论: