vue下的checkbox控制（全选，反选，及统计选中个数）

最新推荐文章于 2023-04-20 11:26:23 发布

转载

最新推荐文章于 2023-04-20 11:26:23 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webcode/p/10836123.html

文章标签：

#javascript #json #ViewUI

本文详细介绍了在Vue.js中如何实现Checkbox的全选、反选功能，并提供了统计选中个数的方法，通过实例代码帮助开发者更好地理解和应用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body,
      ul,
      li {
    
    
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .list-body li:nth-child(even) {
    
    
        background: yellow;
      }
      .list-body li:nth-child(odd) {
    
    
        background: #fff;
      }
      .list-body li:hover {
    
    
        background: green;
      }
      .list-body li.checkedColor {
    
    
        background: green;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="css/baidu.css" />
    <script src="../vue.js"></script>
  </head>