<!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. UML期末复习题——2.5：System Sequence Diagram & Post-condition

    第五题:系统顺序图 重要概念: 1.对象: 对象是特定行为与属性的集合. 对象的表示方式有三种: a.包括对象名和类名 b.只有类名. c.只有对象名 2.消息表示形式: 消息用于描述对象间交互的方式 ...

  2. linux下如何批量替换多个文件中的某个字符串?

    答: sed -i "s/<old_string>/<new_string>/g" `grep "<old_string>" ...

  3. tomcat部署web项目的问题

    1:启动窗口乱码 原因 Tomcat默认都是UTF-8的,但是控制台是GBK的,要保持一致 解决办法 打开tomcat目录下的conf/目录下logging.properties找到java.util ...

  4. 前端 - 轮询, 长轮训, websocket

    轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...

  5. ES6深入浅出_汇总贴

    H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...

  6. PAT 甲级 1018 Public Bike Management (30 分)（dijstra+dfs,dfs记录路径,做了两天）

    1018 Public Bike Management (30 分)   There is a public bike service in Hangzhou City which provides ...

  7. iOS实现TextField光标居中

    // // MyTextField.m // DriverEpoch // // Created by 思 彭 on 2017/10/12. // Copyright © 2017年 http://h ...

  8. 移动应用端的支付宝支付php开发流程

    1.https://openhome.alipay.com/ 支付宝开放平台并创建应用,审核通过后并签约app支付拿到pid 2.按照官方文档用 [RSA签名验签工具.bat]生成应用公钥和私钥 3. ...

  9. Flutter 实现简单搜索功能

    先建立一个主文件,继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个自定义的Widget,主要代码都在这个文件中. import 'package:flu ...

  10. C语言双指针之盛最多水的容器

    题目描述 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中 ...