<!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. typescript 属性默认值使用箭头函数 this指向问题

    今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public ...

  2. 微信h5支付出现“商家参数格式有误，请联系商家解决”

    在浏览器进行微信h5支付时出现:

  3. 第一章04：JDK与JRE 区别

    JDK = 开发工具 JRE = 运行程序 跨平台性 java程序 = 可以在任何系统中运行(不分系统) JVM = java虚拟机(不同系统下载不一样的JDK版本)(安装的时候包含在jre里面)

  4. HTTP与HTTPS有哪些区别？

    大纲 这里写图片描述一.前言: 这里写图片描述这里写图片描述先来观察这两张图,第一张访问域名http://www.12306.cn,谷歌浏览器提示不安全链接,第二张是https://kyfw.1230 ...

  5. 正则表达式判断QQ号格式是否正确

    #正在表达式匹配QQ号格式是否正确#QQ号假如长度为5-11位,纯为数字 import rewhile 1: qq=input("请输入QQ号:") result=re.finda ...

  6. dict的几个要点

    1. 采用key,value键-值对进行存储 2. key必须是不可变对象 3. key值不能重复 添加元素: aDict = {'1':'aaa','b':'bbb','3':'ccc'} aDic ...

  7. MySQL安装与启动——Windows系统下

    以下书写结合菜鸟教程以及本人理解书写. 数据库下载(开源免费) MySQL数据库下载地址https://dev.mysql.com/downloads/mysql/ 可自由选择版本,一般选择Achiv ...

  8. 集合List的排序

    自从出现了泛型和LINQ,对于集合的排序变得更简单了. //倒序 list.OrderByDescending(p=> p.a).ThenByDescending(p => p.b); / ...

  9. Android BLE dfu升级

    dfu升级适用于nordic  nRF51  nRF52 的系统,github上提供了相关升级的库https://github.com/NordicSemiconductor/Android-DFU- ...

  10. oracle的PDB启动

    /*以管理员身份登录*/sqlplus / as sysdba /*查看CDB的状态*/select status from v$instance; /*开启startup,默认是open*/star ...