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引用指针使用介绍
Nov 07 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP 实现链式操作
2021/03/09 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python如何将装饰器定义为类
2020/07/30 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
工程造价自荐信
2013/10/09 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
国际商务专业求职信
2014/07/15 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书