1、效果预览

2、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div id="app">

<!--<h2>{{title}}</h2>-->

    <li v-for="(item,index) in productList">

        <div >产品名称：{{item.productName}}</div>

        <!-- v-bind:class="{'check':item.checked}"这里的check用的是单引号-->

        <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);">

        </a>

    </li>

    <div>

        <!--<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAllFlag=true"></span>-->

        <!--注意不要将true写成ture，还要将div写到vue的作用范围内的div中，即#app这个div中-->

        <span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true);"></span>

        <a href="" class="item-del-btn" @click="checkAll(false);">取消全选</a>

    </div>

</div>

<script src="js/lib/vue.min.js"></script>

<script src="js/lib/vue-resource.min.js"></script>

<script src="js/cart.js"></script>

</body>

</html>

3、cart.js

/**

 * Created by kk on 2017/4/16.

 */

new Vue({

    el:"#app",

    data:{

        // title:"hello vue"

        totalMoney:0,

        productList:[],

        checkAllFlag:false

    },

    filters:{

}

    },

    mounted:function () {

        })

    },

    methods:{

        selectedProduct:function (item) {

            //alert("1");

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

                //Vue.set(item,"checked",true);//全局注册checked

                this.$set(item,"checked",true);//局部注册checked

            }

            else {

                item.checked=!item.checked;

            }

        },

        checkAll:function (flag) {

            this.checkAllFlag=flag;

            var _this=this;

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

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

                    _this.$set(item,"checked",_this.checkAllFlag);

                }else {

                    item.checked=_this.checkAllFlag;

                }

            })

        }

    }

});

Vue.filter("money",function (value,type) {

    return "￥"+value.toFixed(2)+type;

});

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. C++雾中风景番外篇3：GDB与Valgrind ，调试代码内存的工具

    写 C++的同学想必有太多和内存打交道的血泪经验了,常常被 C++的内存问题搅的焦头烂额.(写 core 的经验了)有很多同学一见到 core 就两眼一抹黑,不知所措了.笔者 入"坑&quo ...

  2. odoo 模型继承

    在odoo中有两种模型的继承机制(传统方式和委托继承方式) 重点:在__manifest__.py中找到depends,加上要继承的模块 'depends': ['account'] 注意继承的模型所 ...

  3. python数据分析---第04章 NumPy基础：数组和矢量计算

    NumPy(Numerical Python的简称)是Python数值计算最重要的基础包.大多数提供科学计算的包都是用NumPy的数组作为构建基础. NumPy的部分功能如下: ndarray,一个具 ...

  4. BZOJ.1497.[NOI2006]最大获利(最小割 最大权闭合子图Dinic)

    题目链接 //裸最大权闭合子图... #include<cstdio> #include<cctype> #include<algorithm> #define g ...

  5. CocosCreator项目结构

    1,通过 Dashboard,我们可以创建一个 Hello World 项目作为开始,创建之后的项目有特定的文件夹结构.[参考来源:官方文档] 2,初次创建并打开一个 Cocos Creator 项目 ...

  6. spring boot + embed tomcat + standalone jar的内存泄露问题

    前一阵遇到了一个很坑的内存泄露问题,记录于此: 有个项目采用spring cloud重构后,部署到线上(其中有一个接口,大概每天调用量在1千万次左右),发现zabbix监控里,linux的可用内存一直 ...

  7. Web App 和 Native App，哪个是趋势？

    一.Web App vs. Native App 比起手机App,网站有一些明显的优点. 跨平台:所有系统都能运行 免安装:打开浏览器,就能使用 快速部署:升级只需在服务器更新代码 超链接:可以与其他 ...

  8. qt不能调试

    在F5执行qt的调试时,提示:unknown debugger type "No engine" 需要下载debug调试工具,win7的下载位于:https://www.micro ...

  9. Android + Eclipse + PhoneGap 2.9.0 安卓最新环境配置,部分资料整合网上资料,已成功安装.

    前言:最近心血来潮做了一个以品牌为中心的网站,打算推出本地服务o2o应用.快速开发手机应用,最后选择了phonegap,这里我只是讲述我安装的过程,仅供大家参考. 我开发的一个模型http://www ...

  10. 使用ThreadLocal来实现一个本地缓存

    大家应该知道,用户从发起请求,到服务器响应的这个过程中,在服务器中是在一个线程中的.如果我们吧查询出来的对象放到这个线程自己的缓存中,到用户请求结束时,把这些东西清理掉,应该是一个不错的cache方案 ...