<!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. sass中文注释的解决方法和一些简单用法

    最近用sass来编写项目中的css,发现不能添加中文注释,报错如下 于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决. 在此顺便记录一些sass ...

  2. 1.1 Java并发编程的一些概念

    并发编程的一些概念 同步和异步 同步: 同步方法必须等到方法调用返回后,才能继续后继的行为.也就是说,同步方法执行时,如果没有返回,则后面的方法是执行不到的.同步方法调用,调用过程中可能出现阻塞和等待 ...

  3. centos7初上手2-安装tomcat服务

    上一篇文章说完安装mysql数据库,这篇文章来学习一下tomcat安装 1.先做准备工作,安装jdk,先看服务器上有没有安装相关java文件 下载好1.8版本的安装包,用xftp传到服务器上(根据个人 ...

  4. react native进一步学习（NavigatorIOS 学习）

    特别申明:本人代码不作为任何商业的用途,只是个人学习的一些心得,为了使得后来的更多的程序员少走一些弯路.*(如若侵犯你的版权还望见谅)*. 开发工具:WebStorm,xcode 1. rn的创建的时 ...

  5. highcharts折线图-柱形图等

    https://www.highcharts.com.cn/demo/highcharts/line-basic

  6. java static关键字的使用

    static关键字    通常来说,创建类的时候,是用new创建此类的对象才可以获得,执行new创建对象时数据存储空间才被分配,其方法才被外界调用    有两种情况用new无法解决:        1 ...

  7. HTML+css基础认识

    标签:<div><span                                                                              ...

  8. vue-cli title 里面怎动态显示文字

    在路由里每个都添加一个meta[{ path:'/login', meta: { title: '登录页面' }, component:'login' }]   main.js里面加如下代码:     ...

  9. cocos Studio使用问题

    使用的时候最好是同一套资源饭在一个文件夹下,或者新建的文件和资源类,一个资源分一个产生的层文件

  10. ES 7 async／await Promise

    如何添加SSL证书实现https请求 https://blog.csdn.net/lupengfei1009/article/details/76828190/ ES 7     async/awai ...