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. Unity 之 rawimage 与image 的区别

    http://www.newbieol.com/information/740.html

  2. Unity3d和Android之间互相调用

    摘抄博客 Unity3d Android SDK接入解析(一)Unity3d 与 Android之间的互相调用,一共四章,一定要看完 No1: 总体来说Unity3d与Android之间的互相调用,是 ...

  3. C# 列出进程

    Process[] processes = Process.GetProcesses(); StringBuilder sb = new StringBuilder(); ; i < proce ...

  4. NTFS的交换数据流ADS应用

    NTFS的交换数据流ADS应用   NTFS是Windows常用的文件系统格式.该格式支持交换数据流(Alternate Data Streams,缩写ADS)特性.该特性可以让多个文件流使用同一个文 ...

  5. window配置右键菜单

    window配置右键菜单 cmd -> regeidt :打开注册表 文件右键 依次点开HKEY_CLASSES_ROOT ---> * ---> shell. 右键shell,新建 ...

  6. windows安全配置

    比较重要的 1. 更改默认administrator用户名,密码复杂些 2. 开启防火墙(设置入站规则,入站出站默认全部阻止) 3. 杀毒软件 4. 删除默认共享(net share C$ /del) ...

  7. [POI2011]Inspekcja

    [POI2011]Inspekcja 题目大意: 给你一棵\(n(n\le10^6)\)个点的树,\(s\)为起点.每次选择一个点作为目标点\(t_i\),沿最短路走到\(t_i\)再走回\(s\)( ...

  8. Monte Carlo计算Pi，python实现

    Monte Carlo import random import matplotlib.pyplot as plt import numpy as np 6 # 函数模拟点的随机掉落,并分为两组 de ...

  9. ftp命令详解补充

     下面我来详细地介绍一个登陆FTP的命令和步骤吧: FTP命令是Internet用户使用最频繁的命令之一,不论是在DOS还是UNIX操作系统下使用FTP,都会遇到大量的FTP内部命令.熟悉并灵活应用F ...

  10. mxnet安装及NDArray初体验

    一.mxnet安装 (以下均为mac环境) 有二种方式: 1.1 用conda安装 #创建gluon目录 mkdir gluon-tutorials && cd gluon-tutor ...