vue2.0中vue-cli实现全选、单选计算总价格的实例代码


Posted in Javascript onJuly 18, 2017

由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选、单选方案不合适,自己写了一个简单实用的。就短短的126行代码。

<template>

  <div>

    <table>

      <tr>

        <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td>

        <td>产品名称</td>

        <td>价格</td>

        <td>数量</td>

      </tr>

      <tr v-for="(item,$index) in lists">

        <td><span v-show="checkedCount===lists.length || item.checked===true">我被选中</span><input type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>

        <td>{{item.productName}}</td>

        <td>{{item.price}}</td>

        <td>{{item.count}}</td>

      </tr>

      <tr>

        总价:{{totalMoney}}

      </tr>

    </table>

  </div>

</template>

<script>

  export default{

    data() {

      return {

        checked:[],

        totalPrice:[],

        lists : [

          {

            productName:'产品1',

            price:'24',

            count:'3',

            id:1

          },

          {

            productName:'产品2',

            price:'25',

            count:'6',

            id:2

          },

          {

            productName:'产品3',

            price:'54',

            count:'7',

            id:3

          }

        ]

      }

    },

    computed:{

      totalMoney:function(item,index){

        let sum = 0;

        for(let i=0;i<this.totalPrice.length;i++){

          sum += this.totalPrice[i];

        };

        return sum;

      },

      checkAll: {

        get: function() {

          return this.checkedCount == this.lists.length;

        },

        set: function(value){

          var _this = this;

          if (value) {  

            this.totalPrice = [];

            this.checked = this.lists.map(function(item) {

              item.checked = true;

              let total = item.price*item.count;

              _this.totalPrice.push(total);

              return item.id

            })

          }else{

            this.checked = [];

            this.totalPrice=[];

            this.lists.forEach(function(item,index){

              item.checked = false;

            });

          }

        }

      },

      checkedCount: {

        get: function() {

          return this.checked.length;

        }

      }

    },

    methods:{

      currClick:function(item,index){

        var _this = this;

        if(typeof item.checked == 'undefined'){

          this.$set(item,'checked',true);

            let total = item.price*item.count;

            this.totalPrice.push(total);

            console.log(this.totalPrice);

        }else{

          item.checked = !item.checked;

          if(item.checked){

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }else{

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }

        }

      }

    }

  }

</script>

<style>

  tr td{

    width:200px;

    background: #eee;

    padding:10px 0;

  }

 

</style>

效果:

vue2.0中vue-cli实现全选、单选计算总价格的实例代码

vue2.0中vue-cli实现全选、单选计算总价格的实例代码

vue2.0中vue-cli实现全选、单选计算总价格的实例代码

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

Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jQuery select操作控制方法小结
May 26 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
iscroll.js滚动加载实例详解
Jul 18 #Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 #Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 #Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
js电话号码验证方法
2015/09/28 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python中的函数递归和迭代原理解析
2019/11/14 Python
Python短信轰炸的代码
2020/03/25 Python
python是怎么被发明的
2020/06/15 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
表彰先进的通报
2014/01/31 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年材料员工作总结
2014/11/19 职场文书
婚庆主持词大全
2015/06/30 职场文书
2015年科普工作总结
2015/07/23 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python