<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>分页</title>

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-4" class="col-xs-12 main-table-wrapper">

        <table class="table table-striped table-hover table-bordered" id="main-table">

            <thead>

                <tr>

                    <th><input type="checkbox" v-model="checkall"  v-on:click='checkAll'></th>

                    <th>商品名称</th>

                    <th>商品单价</th>

                    <th>数量</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(item,index) in tableData">

                    <td><input type="checkbox" v-model="checked" :value="item.id"  />   </td>

                    <td>{{ item.name }}</td>

                    <td>{{ item.address }}</td>

                    <td>{{ item.date }}</td>

                    <td><button @click="handleRemove(index)">移除</button></td>

                </tr>

            </tbody>

        </table>

        <div>{{checked}}</div>

    </div>  

    <script>

        var app = new Vue({

            el: '#app-4',

            data: {

                tableData: [{

                    id:,

                    date: '2016-05-02',

                    name: '王小虎',

                    address: '上海市普陀区金沙江路 1518 弄',

                    }, {

                        id:,

                        date: '2016-05-04',

                        name: '王小虎',

                        address: '上海市普陀区金沙江路 1517 弄'

                    }, {

                        id:,

                        date: '2016-05-01',

                        name: '王小虎',

                        address: '上海市普陀区金沙江路 1519 弄'

                    }, {

                        id:,

                        date: '2016-05-03',

                        name: '王小虎',

                        address: '上海市普陀区金沙江路 1516 弄'

                    }

                ],

                checkall:false,

                checked:[]

            },

            methods: {

                handleRemove: function(index){

                        this.tableData.splice(index,);

                    },

                checkAll: function () {

                    var _this = this

                    if (this.checkall) {

                    // 实现反选

                        this.checked = []

                    } else {

                    // 实现全选

                        this.checked = []

                        this.tableData.forEach(function (item) {

                            _this.checked.push(item.id)

                        })

                    }

                    if (this.checked.length === this.tableData.length) {

                        this.checkall = true

                    // console.log(this.checkall)

                    // console.log(this.checked)

                    }

                }

            }

        });

    </script>

</body>

</html>

vue day7 table checkbox 全选的更多相关文章

  1. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

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

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

  3. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  4. jQuery使用prop设置checkbox全选、反选

    $(function(){     var checkbox = $("input[type='checkbox']");     //全选     $('#select-all' ...

  5. TreeView checkbox 全选

    在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  8. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  9. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. 页面显示LCD液晶字体或者其他特殊字体

    如果web项目中需要用到LCD液晶字体显示数值(如下图所示)该怎么办? 在这就需要用到@font-face(具体看一下语法) /* 定义 */ @font-face { font-family: 'M ...

  2. yuv2mp4

    >您使用什么类型的YUV像素格式?最常见的格式是YUV4:2:0平面8位(YUV420p).您可以键入ffmpeg -pix_fmts以获取所有可用格式的列表.>什么是帧率?在我的例子中, ...

  3. egret 简单的四方向的a星寻路，在wing中可以直接跑

    /** * main类中加载场景 * 创建游戏场景 * Create a game scene */ private createGameScene() { MtwGame.Instance.init ...

  4. Spark Streaming的容错和数据无丢失机制

    spark是迭代式的内存计算框架,具有很好的高可用性.sparkStreaming作为其模块之一,常被用于进行实时的流式计算.实时的流式处理系统必须是7*24运行的,同时可以从各种各样的系统错误中恢复 ...

  5. Unity资源内存管理--webstream控制

    一 使用前提 1,需要使用资源热更新 2,使用Assetbundle资源热更(AssetBundle是产生webstream的元凶) 二 为什么要用AssetBundle AssetBundle本质上 ...

  6. Java容器解析系列(7) ArrayDeque 详解

    ArrayDeque,从名字上就可以看出来,其是通过数组实现的双端队列,我们先来看其源码: /** 有自动扩容机制; 不是线程安全的; 不允许添加null; 作为栈使用时比java.util.Stac ...

  7. 只有自身跟上时代，offer就会如期而至

    [官宣]只有自身跟上时代,offer就会如期而至 最近对求职者来说,似乎颇不太平,各种裁员扑面而来,许多企业(易车.滴滴等)相继官宣裁员信息,包括阿里缩减校招,百度减少社招等,都让人不禁打嗦.但我们华 ...

  8. classPath与PATH

    PATH是window的变量,而不是Java的变量: 通常配置PATH路径是为了找到需要的XX.exe命令,而且配置在用户的变量下面: 例如:JDK中的javac与java命令在cmd中使用,需要把命 ...

  9. Delphi非官方的补丁

    http://git.kngstr.com/KngStr/delphi-fixes 使用方法 方法一: 1. 拷贝需要的补丁文件到你的工程目录 2. 拷贝编译的时候缺少或错误的文件到你的工程目录 优缺 ...

  10. js获取今天是星期几