<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    table {

      border-collapse: collapse;

      border-spacing: 0;

      border: 1px solid #c0c0c0;

      width: 500px;

      margin: 100px auto;

      text-align: center;

    }

    th {

      background-color: #09c;

      font: bold 16px "微软雅黑";

      color: #fff;

      height: 24px;

    }

    td {

      border: 1px solid #d0d0d0;

      color: #404060;

      padding: 10px;

    }

  </style>

</head>

<body>

  <table id='app'>

    <tr>

      <th>

        <input type="checkbox" name="" id="checkAll" @click='fn' />全选/全不选

      </th>

      <th>菜名</th>

      <th>商家</th>

      <th>价格</th>

    </tr>

    <tr>

      <td>

        <input :checked='msg' type="checkbox" name="check" class="ck" />

      </td>

      <td>红烧肉</td>

      <td>隆江猪脚饭</td>

      <td>￥200</td>

    </tr>

    <tr>

      <td>

        <input :checked='msg' type="checkbox" name="check" class="ck" />

      </td>

      <td>香酥排骨</td>

      <td>隆江猪脚饭</td>

      <td>￥998</td>

    </tr>

    <tr>

      <td>

        <input :checked='msg' type="checkbox" name="check" class="ck" />

      </td>

      <td>北京烤鸭</td>

      <td>隆江猪脚饭</td>

      <td>￥88</td>

    </tr>

  </table>

</body>

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

<script>

  new Vue({

    el: '#app',

    data: {

      // 先让checked默认为false

      msg: false,

    },

    methods: {

      // 点击事件做判断

      fn() {

        // 如果为值为false 那就让他编程true

        // 如果为值为true 那就让他编程false

        if (this.msg == true) {

          this.msg = false;

        } else {

          this.msg = true;

        }

      }

    }

  })

</script>

</html>

<!-- 有bug联系我 -->

vue实现简单的全选/全不选效果

VUE实现简单的全选/全不选的更多相关文章

  1. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  2. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  3. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  4. Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  5. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  6. Jquery 遍历 Table；遍历CheckBox ；遍历Select；全选/全不选

    关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table  id="thistab"> < ...

  7. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  8. 在jquery中，全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. JS checkbox 全选 全不选

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

随机推荐

  1. 005-多线程-锁-JUC锁-LockSupport【使用、Unsafe、对比Object的wait、底层源码】

    一.概述 在Java多线程中,当需要阻塞或者唤醒一个线程时,都会使用LockSupport工具类来完成相应的工作.LockSupport定义了一组公共静态方法,这些方法提供了最基本的线程阻塞和唤醒功能 ...

  2. delphi中Treeview的使用介绍

    今天重点学习了TreeView的使用方法,基本的已经写了,现在主要想说的是如何显示数据库的资料,今天只是做了个较简单的例子,一个父节点下显示数据库中某个field的值.代码如下: procedure ...

  3. System.Web.UI.Page的用法，一定要学会懒

    在ASP.NET中,任何页面都是继承于System.Web.UI.Page,他提供了ASP.NET中的Response,Request,Session,Application的操作.在使用Visual ...

  4. Ubuntu 18.04 上使用xrdp远程桌面连接

    参考:https://blog.csdn.net/qq_25556149/article/details/82216190 1,环境查看 2,安装 xrdp.tightvncserver apt-ge ...

  5. 联想拯救者电脑装Ubuntu没有WIFI

    最近给联想电脑装Ubuntu系统,但是装完之后总是无法启动WIFI,而宽带上网却可以,给出一个解决办法,但是该办法应该只适合联想电脑,其他电脑请自测! 打开终端,输入下面指令: sudo modpro ...

  6. Quartz任务调度系统，克隆表达式

    Quartz任务调度系统,克隆表达式 (1).克隆表达式可以包括7个字段:秒.分.小时.月内日期.月.周内日期.年(可选字段) (2).特殊字符: 一.反斜线(/)字符表示增量."5/15& ...

  7. linux基础之文件类型与权限

    在终端以root身份登入linux之后,下达 ls -al 会获得如下结果

  8. 单元测试ppt

      单元测试ppt思路详解 目前的状况:1,现在很多单元测试只是利用@Test注解把代码或者整个请求接口内的business做测试2,单测的过程就很多查数据库的方法,但是没必要每次都测sql,因为sq ...

  9. 有关IP和子网掩码的总结

    从之前写的那个概括的文章之后,具体细节知识我也不知道写啥子,最近忙于毕业论文和考证,所以就总结一下这方面的知识,本篇的话就先从IP说起. IP这方面有IPv4和IPv6这两方面的内容,这里就只说IPv ...

  10. Adobe Acrobat 如何通过书签制作多级目录

    废话不多说,直接上官方文档 看不清可 右击 > 在新标签页中打开图片