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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
Ajax基础知识详解
Feb 17 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
JavaScript实例 ODO List分析
Jan 22 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
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php三元运算符知识汇总
2015/07/02 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
动态控制Table的js代码
2007/03/07 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
简单介绍Python中的JSON模块
2015/04/08 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
基于python生成器封装的协程类
2019/03/20 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python 字典套字典或列表的示例
2019/12/16 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
华为c/c++笔试题
2016/01/25 面试题
个人简历自我鉴定
2013/10/11 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
《草船借箭》教学反思
2016/02/23 职场文书