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 相关文章推荐
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
小程序实现列表展开收起效果
Jul 29 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面试题 试试看看你会不会也中招
2014/08/19 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python的信号库Blinker用法详解
2020/12/31 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
三年级音乐教学反思
2014/01/28 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Python中的 enumerate和zip详情
2022/05/30 Python