<!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. Jmeter-app接口

    1.IOS登录接口涉及的三个接口: 2.三个接口传入的参,第三个是判断用户是否登录成功的 http://118.178.247.67:8449/service/userLogin/phoneQuick ...

  2. 如何规避同时使用v-if与v-for?

    先将结果过滤,再用v-if循环 遇到问题:使用Vue -computed传参数不成功, 后来将参数放在compute里面方法名里再构造参数进行传递

  3. git如何配置邮箱和用户名?

    答: 1. 配置邮箱 git config --global user.email "jello_smith@163.com" 2. 配置用户名 git config --glob ...

  4. Dart 语法中文在线学习网址收藏

    为了学习flutter UI框架,必须先学好dart语言,故收藏了有关 Dart 语法中文在线学习网址 http://dart.goodev.org/guides/language/language- ...

  5. thinkphp模版主题使用方法

    3.1.3模版主题使用方法,手册貌似没有.配置项: 'DEFAULT_THEME'=>'default',//默认主题 'THEME_LIST'=>'default,theme',//主题 ...

  6. Qt编写自定义控件23-广告轮播控件

    一.前言 广告轮播这个控件做的比较早,是很早以前定制一个电信客户端时候用到的,该客户端需要在首页展示轮播预先设定好的图片,图片的路径可以自由设定,然后轮播的间隔速度可以自由控制,同时该控件还需要提供两 ...

  7. CentOS 7下限制ip访问

    此教程的作用:设置SSH只允许特定用户从特定的IP登录,其它未经允许的用户和IP都不能登录 示例1:只允许192.168.0.222登录192.168.1.81 # vim /etc/hosts.al ...

  8. 华为ENSP命令大全

    实验命令___ENSP   一. 生成树STP 注:桥优先级取值越小,则优先级越高,通过配置优先级(开销值cost)可控制根桥选举.当根桥发生故障则会选举新的根桥,当故障恢复根桥重新选举.通过设置端口 ...

  9. OpenCV.物体识别

    1.度娘:“OpenCV 物体识别” 1.1.opencv实时识别指定物体 - 诺花雨的博客 - CSDN博客.html(https://blog.csdn.net/qq_27063119/artic ...

  10. js监听屏幕的高度变化

    之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线.现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的 ...