1. <template>
  2. <div>
  3. <table>
  4. <tr>
  5. <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td>
  6. <td>产品名称</td>
  7. <td>价格</td>
  8. <td>数量</td>
  9. </tr>
  10. <tr v-for="(item,$index) in lists">
  11. <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>
  12. <td>{{item.productName}}</td>
  13. <td>{{item.price}}</td>
  14. <td>{{item.count}}</td>
  15. </tr>
  16. <tr>
  17. 总价:{{totalMoney}}
  18. </tr>
  19. </table>
  20. </div>
  21. </template>
  22. <script>
  23. export default{
  24. data() {
  25. return {
  26. checked:[],
  27. totalPrice:[],
  28. lists : [
  29. {
  30. productName:'产品1',
  31. price:'24',
  32. count:'3',
  33. id:1
  34. },
  35. {
  36. productName:'产品2',
  37. price:'25',
  38. count:'6',
  39. id:2
  40. },
  41. {
  42. productName:'产品3',
  43. price:'54',
  44. count:'7',
  45. id:3
  46. }
  47. ]
  48. }
  49. },
  50. computed:{
  51. totalMoney:function(item,index){
  52. let sum = 0;
  53. for(let i=0;i<this.totalPrice.length;i++){
  54. sum += this.totalPrice[i];
  55. };
  56. return sum;
  57. },
  58. checkAll: {
  59. get: function() {
  60. return this.checkedCount == this.lists.length;
  61. },
  62. set: function(value){
  63. var _this = this;
  64. if (value) {
  65. this.totalPrice = [];
  66. this.checked = this.lists.map(function(item) {
  67. item.checked = true;
  68. let total = item.price*item.count;
  69. _this.totalPrice.push(total);
  70. return item.id
  71. })
  72. }else{
  73. this.checked = [];
  74. this.totalPrice=[];
  75. this.lists.forEach(function(item,index){
  76. item.checked = false;
  77. });
  78. }
  79. }
  80. },
  81. checkedCount: {
  82. get: function() {
  83. return this.checked.length;
  84. }
  85. }
  86. },
  87. methods:{
  88. currClick:function(item,index){
  89. var _this = this;
  90. if(typeof item.checked == 'undefined'){
  91. this.$set(item,'checked',true);
  92. let total = item.price*item.count;
  93. this.totalPrice.push(total);
  94. console.log(this.totalPrice);
  95. }else{
  96. item.checked = !item.checked;
  97. if(item.checked){
  98. this.totalPrice = [];
  99. this.lists.forEach(function(item,index){
  100. if(item.checked){
  101. let total = item.price*item.count;
  102. _this.totalPrice.push(total);
  103. }
  104. });
  105. }else{
  106. this.totalPrice = [];
  107. this.lists.forEach(function(item,index){
  108. if(item.checked){
  109. let total = item.price*item.count;
  110. _this.totalPrice.push(total);
  111. }
  112. });
  113. }
  114. }
  115. }
  116. }
  117. }
  118. </script>
  119. <style>
  120. tr td{
  121. width:200px;
  122. background: #eee;
  123. padding:10px 0;
  124. }
  125.  
  126. </style>

效果:

vue-cli中实现全选、单选计算总价格(vue2.0)的更多相关文章

  1. vue开发购物车,解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  2. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  3. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  4. vue2.0在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  5. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  6. ExtJS中,将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  7. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. vue中实现全选功能

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue ...

  9. 第八十二篇:Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

随机推荐

  1. OpenCV学习(2) OpenCV的配置

          下面我们在VS2010中编写一个简单的OpenCV程序,来看看如何在程序中使用OpenCV. 创建一个新的Win32 控制台程序,附加选项为空工程(empty project),并添加一个 ...

  2. 数学图形(1.18)Poinsot's spiral螺线

    它是一种螺线,其特点是细分时无限递归. 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 vertices = t = *PI ...

  3. js执行eval()抛出异常SyntaxError

    try{ eval("("+data+")"); }catch(err) { location.href = window.location.href; }

  4. 【Networking】(转)一个非常好的epoll+线程池服务器Demo

    (转)一个非常好的epoll+线程池服务器Demo Reply 转载自:http://zhangyafeikimi.javaeye.com/blog/285193 [cpp] /** 张亚霏修改 文件 ...

  5. asp.net 利用HttpWebRequest自动获取网页编码并获取网页源代码

    /// <summary> /// 获取源代码 /// </summary> /// <param name="url"></param& ...

  6. 机器学习实战之PCA

    1.  向量及其基变换 1.1 向量内积 (1)两个维数同样的向量的内积定义例如以下: 内积运算将两个向量映射为一个实数. (2) 内积的几何意义 如果A\B是两个n维向量, n维向量能够等价表示为n ...

  7. .NET反编译之manager,base.AutoScaleMode修复

    使用反编译软件导出项目时,出现警告:设计器无法处理第X 行的代码:this.AutoScaleMode = AutoScaleMode.Font;方法"InitializeComponent ...

  8. angularjs中的$eval方法

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因 ...

  9. (队列的应用5.3.3)POJ 3125 Printer Queue(优先队列的使用)

    /* * POJ_3125.cpp * * Created on: 2013年10月31日 * Author: Administrator */ #include <iostream> # ...

  10. Java之JVM调优案例分析与实战(4) - 外部命令导致系统缓慢

    环境:这是一个来自网络的案例:一个数字校园应用系统,运行在一台4个CPU的Solaris 10操作系统上,中间件为ClassFish服务器.系统在进行大并发压力测试的时候,发现请求响应时间比较慢,通过 ...