联系我们
简单又实用的WordPress网站制作教学
当前位置：网站首页 > 网页前端技术 > 正文

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

作者：98wpeu发布时间：2026-09-12分类：网页前端技术浏览：7

导读：对于Web前端三大框架中的vue.js，相信大家应该比较熟悉了。今天给大家分享一个小DemO应用，模拟购物车计算商品价格和总价以及单选全选功能。功能介绍1、列表单价计算2、单选和全...

对于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>

大家可以预览看下效果。

标签：总价购物车商品价格全选单选实例

相关推荐

网页前端技术排行
最近发表
网站分类
标签列表