<!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. IOS项目集成ShareSDK实现第三方登录、分享、关注等功能

    (1)官方下载ShareSDK iOS 2.8.8,地址:http://sharesdk.cn/ (2)根据实际情况,引入相关的库,参考官方文档. (3)在项目的AppDelegate中一般情况下有三 ...

  2. Docker 官方安装详解

    # 0x00 安装热身 - 针对CE版本 Docker 分为 CE 和 EE 版本, CE免费,EE收费,CE版以及能够满足我们所有需求 本文针对 CE 版本的安装进行说明 - 系统说明 本文以 Ce ...

  3. Linux命令之date

    date [选项] [格式] date [-u|--utc|--universal] [MMDDhhmm[[CC]yy][.ss]] date命令根据指定格式显示当前时间或设置系统时间.很多shell ...

  4. linux操作备份

    ---------------------------------------------------------------------------------------------------- ...

  5. es6 map()和filter()详解【转】

    原文地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6 ...

  6. 【ARTS】01_29_左耳听风-201900527~201900602

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  7. C\C++中的 struct 关键字详解

    struct关键字是用来定义一个新的类型,这个新类型里面可以包含各种其他类型,称为结构体. 1. 什么是结构体 结构体(struct)是一种自定义的数据类型,就是把一组需要在一起使用的数据元素组合成一 ...

  8. 【ARM-Linux开发】arm-none-Linux-gnueabi-gcc下载安装

    arm-none-Linux-gnueabi-gcc是 Codesourcery 公司(目前已经被Mentor收购)基于GCC推出的的ARM交叉编译工具.可用于交叉编译ARM系统中所有环节的代码,包括 ...

  9. 洛谷 题解 P4158 【[SCOI2009]粉刷匠】

    状态: dp[i][j][k][0/1]: 到达第i行时, 到达第j列时, 刷到第k次时, 这一格有没有刷对 转移 换一块木板时肯定要多刷一次 dp[i][j][k][0]=max(dp[i-1][m ...

  10. Javascript 数组转无限级分类

    递归 var arr = [ {"id":1,"parent_id":0,"name":"Foods"}, {" ...