<!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. C#winform和百度API互动-----之JS读取中C#中的函数

    例子1 线上JS var getcpylocation =window.external.getlocation(); map.centerAndZoom(getcpylocation,12); C# ...

  2. insmod内核模块时提示Failed to find the folder holding the modules怎么办?

    答:笔者通过重新编译内核和根文件系统解决了此问题 (笔者使用的是openwrt系统) 分析: 1. ’Failed to find the folder holding the modules‘这句l ...

  3. 003-多线程-JUC集合-Set-CopyOnWriteArrayList

    一.概述 它是线程安全的无序的集合,可以将它理解成线程安全的HashSet.有意思的是,CopyOnWriteArraySet和HashSet虽然都继承于共同的父类AbstractSet:但是,Has ...

  4. PS改变图片像素大小（一寸照片变二寸）

    1.打开Photoshop,点击“文件”菜单,选择“打开”,将要处理的图片加载进来 2.找到“图像”菜单,选择“图像大小”,我们在这里对图片进行处理. 3.根据需要对其分辨率或者尺寸进行设置,设置好后 ...

  5. kubernetes 之kubelet客户端证书过期问题处理 KubeClientCertificateExpiration apiserver (monitoring/k8s warning) Kubernetes API certificate is expiring in less than 7 days.

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4gAAAKMCAYAAAAZj+XuAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYG ...

  6. 使用xhprof进行线上PHP性能追踪及分析

    转自: http://avnpc.com/pages/profiler-php-performance-online-by-xhprof

  7. swift 第九课 用tableview 做一个下拉菜单Menu

    写到这里的时候,自己这个项目已经完成了一半左右,项目进度自己还是挺满意.今天又有一个新的布局,要实现个下拉菜单,刚开始写的时候,觉得会很容易,后来发现也是小错不断, 我想自己限制的自己属于写博客的初期 ...

  8. unity 读取灰度图生成按高程分层设色地形模型

    准备灰度图 1.高程按比例对应hue色相(hsv)生成mesh效果 o.color = float4(hsv2rgb(float3(v.vertex.y/100.0, 0.5, 0.75)), 1.0 ...

  9. jqGrid只向服务器请求一次的设置

    也就是说,在表格初始化时请求一次服务器,以后翻页就不再请求服务器,翻页的也只是初始化数据. 一次复制别人的代码时,一直不知道为什么翻页不请求服务器. 搞到人都爆炸,原来只是一个设置的地方. loado ...

  10. java.net.UnknownHostException: MySQLMASTER: MySQLMASTER: 未知的名称或服务

    linux环境在连接Activemq的时候报以下信息,找了半天配了下host  OK了,记录一下. java.net.UnknownHostException: MySQLMASTER: MySQLM ...