VUE实现简单的全选/全不选

Posted 2020-12-01 lwa1999

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE实现简单的全选/全不选相关的知识，希望对你有一定的参考价值。

<!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实现简单的全选/全不选的主要内容，如果未能解决你的问题，请参考以下文章

javascript实现复选框的全选全不选