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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
封装属于自己的JS组件
Jan 27 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 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
Protoss魔法科技
2020/03/14 星际争霸
php 数组的一个悲剧?
2011/05/11 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php二维码生成
2015/10/19 PHP
window.print打印指定div实例代码
2013/12/13 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中文件操作简明介绍
2015/04/13 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
电大本科自我鉴定
2014/02/05 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
单位同意报考证明
2015/06/17 职场文书
欠款证明
2015/06/24 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
同事欢送会致辞
2015/07/31 职场文书
2016七夕情人节感言
2015/12/09 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书