×
  • Web前端首页
  • VueJs
  • 分享vue实例应用:购物车计算商品价格和总价以及单选全选功能

分享vue实例应用:购物车计算商品价格和总价以及单选全选功能

作者:Web前端之家2020.10.10来源:Web前端之家浏览:249评论:0
关键词:vue
微信公众号

微信公众号

对于Web前端三大框架中的vue.js,相信大家应该比较熟悉了。今天给大家分享一个小DEMO应用,模拟购物车计算商品价格和总价以及单选全选功能。

功能介绍

1、列表单价计算

2、单选和全选功能

3、总价格计算

这些功能在我们电商项目中经常用到,希望大家能掌握。废话不多说,直接开始。示例图:

image.png

首先我们简单梳理下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>

大家可以预览看下效果。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20201010.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria