1、效果预览

2、index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.  
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0">
  8.     <title>Title</title>
  9.     <link rel="stylesheet" href="css/index.css">
  10. </head>
  11. <body>
  12. <div id="app">
  13. <!--<h2>{{title}}</h2>-->
  14.     <li v-for="(item,index) in productList">
  15.         <div >产品名称：{{item.productName}}</div>
  16.         <!-- v-bind:class="{'check':item.checked}"这里的check用的是单引号-->
  17.         <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);">
  18.         </a>
  19.     </li>
  20.     <div>
  21.         <!--<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAllFlag=true"></span>-->
  22.         <!--注意不要将true写成ture，还要将div写到vue的作用范围内的div中，即#app这个div中-->
  23.         <span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true);"></span>
  24.         <a href="" class="item-del-btn" @click="checkAll(false);">取消全选</a>
  25.     </div>
  26. </div>
  27.  
  28. <script src="js/lib/vue.min.js"></script>
  29. <script src="js/lib/vue-resource.min.js"></script>
  30. <script src="js/cart.js"></script>
  31. </body>
  32. </html>

3、cart.js

  1. /**
  2.  * Created by kk on 2017/4/16.
  3.  */
  4. new Vue({
  5.     el:"#app",
  6.     data:{
  7.         // title:"hello vue"
  8.         totalMoney:0,
  9.         productList:[],
  10.         checkAllFlag:false
  11.     },
  12.     filters:{
  13.  
  14. }
  15.     },
  16.     mounted:function () {
  17.  
  18.         })
  19.  
  20.     },
  21.     methods:{
  22.  
  23.         selectedProduct:function (item) {
  24.             //alert("1");
  25.             if(typeof item.checked=="undefined"){
  26.                 //Vue.set(item,"checked",true);//全局注册checked
  27.                 this.$set(item,"checked",true);//局部注册checked
  28.             }
  29.             else {
  30.                 item.checked=!item.checked;
  31.             }
  32.         },
  33.         checkAll:function (flag) {
  34.             this.checkAllFlag=flag;
  35.             var _this=this;
  36.             this.productList.forEach(function (item,index) {
  37.                 if(typeof item.checked=="undefined"){
  38.                     _this.$set(item,"checked",_this.checkAllFlag);
  39.                 }else {
  40.                     item.checked=_this.checkAllFlag;
  41.                 }
  42.             })
  43.         }
  44.     }
  45.  
  46. });
  47. Vue.filter("money",function (value,type) {
  48.     return "￥"+value.toFixed(2)+type;
  49. });

vue中全选和取消的更多相关文章

  1. 全选、取消、2级 checkbox的选中切换

    需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...

  2. Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习 反选，全选，取消边框

    点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  4. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  5. checkbox全选和取消功能

    这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...

  6. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  7. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

  8. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  9. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

随机推荐

  1. 安装Appium-desktop，并连接模拟器！Appium-Python-Client

    1.下载appium-desktop https://github.com/appium/appium-desktop/releases 2.双击 exe 文件,然后,等待安装完就好了 3.启动app ...

  2. POJ.1752.Advertisement(差分约束 最长路SPFA)

    题目链接 \(Description\) 有\(n\)个人在一条直线上跑步,每个人的起点 \(Si\).终点 \(Ei\) 已知:每个点可以放一个广告牌,一个人\(i\)能看到的广告牌数量为 \(Ei ...

  3. 喵哈哈村的魔法考试 Round #17 题解

    喵哈哈村的秘境探险系列. A. 实际上就是求乘积%k是否等于0,显然 a * b % k = (a%k)*(b%k)%k,所以边乘边取模就好了. #include<bits/stdc++.h&g ...

  4. Java svnkit check update commit

    import java.io.File; import org.apache.log4j.Logger;import org.tmatesoft.svn.core.SVNCommitInfo;impo ...

  5. vim 语法着色完全配置

    原文地址:http://blog.sina.com.cn/s/blog_878940b3010156ku.html 在终端输入:sudo vim /etc/vim/vimrc   打开配置文件.编辑命 ...

  6. Java -Dfile.encoding=UTF-8 干掉乱码

    遭遇乱码问题的来龙去脉 这两天写了一个 Java 程序来玩,结果又遭遇了以前遇到过很多次的乱码问题,具体描述一下:在 Mac 系统里面,常用的 Java 程序启动方式有如下几种:1.通过 eclips ...

  7. Socket编程的UDP与TCP，应用在哪些地方

    随着网络技术飞速发展,网速已不再是传输的瓶颈,UDP协议以其简单.传输快的优势,在越来越多场景下取代了TCP,如网页浏览.流媒体.实时游戏.物联网. 1,网速的提升给UDP稳定性提供可靠网络保障 CD ...

  8. escape()、encodeURI()、encodeURIComponent()区别详解 (转)

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:,decodeURI,decodeURIComp ...

  9. MySQL实用工具汇总

    本文收录了mysql相关的实用工具.工具包括:性能测试,状态分析,SQL路由,及运维开发相关的所有工具,并会持续更新. 1.工具套件集 - percona-toolkit - oak-toolkit ...

  10. DNS缓存中毒是怎么回事？

    近来,网络上出现互联网漏洞——DNS缓存漏洞,此漏洞直指我们应用中互联网脆弱的安全系统,而安全性差的根源在于设计缺陷.利用该漏洞轻则可以让用户无法打开网页,重则是网络钓鱼和金融诈骗,给受害者造成巨大损 ...