vue实现简单计算商品价格


Posted in Javascript onSeptember 14, 2020

本文实例为大家分享了vue实现简单计算商品价格的具体代码,供大家参考,具体内容如下

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Angular5.1新功能分享
Dec 21 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
You might like
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
预备党员思想汇报
2014/01/08 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
公司请假条格式
2014/04/11 职场文书
外出考察学习心得体会
2016/01/18 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
JavaScript实现两个数组的交集
2022/03/25 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL