微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 购物车三种实现(原生JS、jquery和vuejs)
博主信息
博文 54
粉丝 6
评论 31
访问量 126512
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
购物车三种实现(原生JS、jquery和vuejs)
吾逍遥
原创
3599人浏览过

一、购物车功能描述及实现思路

1、购物车功能描述

  1. 全选复选框勾选时，所有商品单项全选，全选不勾选时，所有商品单项也不勾选
  2. 商品单项有一项不勾选时，全选复选框自动不勾选，当所有商品单项勾选时，全选复选框则自动勾选
  3. 商品单项数量影响商品单项总价
  4. 商品单项数量影响商品总数量
  5. 商品单项数量影响商品总价格
  6. 商品单项是否勾选影响商品总数量
  7. 商品单项是否勾选影响商品总价格

2、实现思路

虽然后面采用了原生JS、jquery和vuejs实现，但基本思路都是一样，尤其是核心问题的解决问题的思路。

第1项 其实就是将全选复选框的状态赋值给每一个单项选择即可，这样全选和单选就同步了，无论是勾选还是不选。

第2项 我的思路和老师一样，不过实现方式不一样，老师是使用计数器，通过计数器是否等于总数来决定全选是否勾选。我的是直接 统计勾选的个数，和总数比较 ，相等则自动勾选全选，不等则不勾选。

第3、4、5项 为所有商品数量输入框添加事件，在事件函数中可对商品单项总价、商品总数量和商品总价格计算。 难点在于获取是第几个商品数量输入框，这样可改变对应商品单项总价 。老师所有都是采用数组遍历，我认为不合理，因为商品单项数量改变时其单项总价只要计算它就可以，所有都计算一遍，目前只有几个商品没关系，若是几百个就会浪费不必要的时间了，降低了效率。这时就需要知道是哪个商品数量改变了，这就需要事件监听器添加索引就可以，可惜直接添加是无效的。下面是正确添加方式，大家可以试着理解为什么这样就可以了??jquery也有类似实现，至于vuejs则是双向绑定就简单多了。

  1. // 监听事件传参不能直接传参数，而是通过function((ev){函数名(ev,自定义参数)})  ******
  2. for (let [index, item] of checkItemBtns.entries()) {
  3.   item.addEventListener( 'click', function (ev) { checkItem(ev, index); }, false );
  4. }

第5、6项 商品单项是否勾选将影响商品总数量和总价格，至于数量和商品单项总价则不受影响。我的解决思路就是设置开关，对每个商品设置开关，若勾选则为1时计算它，不勾选则为0不计算它。这里说明下原生JS和jquery中目前唯一问题是开关对单项商品总价有影响，当然可以加两行代码就解决了。至于vuejs则全部实现了所有功能。

二、原生JS实现购物车

这里原生JS实现购物车基本就是按上面思路来完成的，具体实现可看下面源码。这里唯一强调一点就是商品单项数量改变是只会改变它的单项总价、总数量和总价格这三个位置。实现就是用上面原理中说的给事件监听器的回调函数传递参数，也是事件监听器的进阶用法了，大家可以参考下。

至于我勾选单项影响单项总价、总数量和总价格三个位置，如果你认为不合理可以简单修改就可以。下面jq也是如此效果，vuejs则只影响总数量和总价格了。

  1. <style>
  2.   * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.   }
  7.   table {
  8.     border-collapse: collapse;
  9.     width: 90vw;
  10.     min-width: 680px;
  11.     text-align: center;
  12.     margin: auto;
  13.   }
  14.   table caption {
  15.     font-size: 1.5em;
  16.     margin-bottom: 15px;
  17.   }
  18.   table th,
  19.   table td {
  20.     border: 1px solid;
  21.     padding: 5px;
  22.   }
  23.   table thead tr {
  24.     background-color: lightblue;
  25.   }
  26.   table tbody tr:nth-child(even) {
  27.     background-color: lightcyan;
  28.   }
  29.   table input {
  30.     text-align: center;
  31.     line-height: 2em;
  32.   }
  33.   table input[type='checkbox'] {
  34.     width: 1.5em;
  35.     height: 1.5em;
  36.   }
  37.   .btns {
  38.     width: 90%;
  39.     margin: 1em auto;
  40.     display: flex;
  41.     justify-content: flex-end;
  42.   }
  43.   button {
  44.     width: 8em;
  45.     height: 2em;
  46.     outline: none;
  47.     border: none;
  48.     background-color: seagreen;
  49.     color: white;
  50.     letter-spacing: 1em;
  51.   }
  52. </style>
  53. <table>
  54.   <caption>购物车</caption>
  55.   <thead>
  56.     <tr>
  57.       <th>
  58.         <input type="checkbox" name="checkAll" id="check-all" checked />
  59.         <label for="check-all">全选</label>
  60.       </th>
  61.       <th>ID</th>
  62.       <th>品名</th>
  63.       <th>单位</th>
  64.       <th>单价/元</th>
  65.       <th>数量</th>
  66.       <th>金额/元</th>
  67.     </tr>
  68.   </thead>
  69.   <tbody>
  70.     <tr>
  71.       <td>
  72.         <input type="checkbox" name="itemId" value="SN-1010" checked />
  73.       </td>
  74.       <td>SN-1010</td>
  75.       <td>MacBook Pro电脑</td>
  76.       <td>台</td>
  77.       <td>18999</td>
  78.       <td>
  79.         <input type="number" name="counter" value="1" min="1" step="1" />
  80.       </td>
  81.       <td></td>
  82.     </tr>
  83.     <tr>
  84.       <td>
  85.         <input type="checkbox" name="itemId" value="SN-1020" checked />
  86.       </td>
  87.       <td>SN-1020</td>
  88.       <td>iPhone手机</td>
  89.       <td>部</td>
  90.       <td>4999</td>
  91.       <td>
  92.         <input type="number" name="counter" value="2" min="1" step="1" />
  93.       </td>
  94.       <td></td>
  95.     </tr>
  96.     <tr>
  97.       <td>
  98.         <input type="checkbox" name="itemId" value="SN-1030" checked />
  99.       </td>
  100.       <td>SN-1030</td>
  101.       <td>智能AI音箱</td>
  102.       <td>只</td>
  103.       <td>399</td>
  104.       <td>
  105.         <input type="number" name="counter" value="3" min="1" step="1" />
  106.       </td>
  107.       <td></td>
  108.     </tr>
  109.     <tr>
  110.       <td>
  111.         <input type="checkbox" name="itemId" value="SN-1040" checked />
  112.       </td>
  113.       <td>SN-1040</td>
  114.       <td>SSD移动硬盘</td>
  115.       <td>个</td>
  116.       <td>888</td>
  117.       <td>
  118.         <input type="number" name="counter" value="4" min="1" step="1" />
  119.       </td>
  120.       <td></td>
  121.     </tr>
  122.     <tr>
  123.       <td>
  124.         <input type="checkbox" name="itemId" value="SN-1050" checked />
  125.       </td>
  126.       <td>SN-1050</td>
  127.       <td>黄山毛峰</td>
  128.       <td>斤</td>
  129.       <td>999</td>
  130.       <td>
  131.         <input type="number" name="counter" value="5" min="1" step="1" />
  132.       </td>
  133.       <td></td>
  134.     </tr>
  135.   </tbody>
  136.   <tfoot>
  137.     <tr>
  138.       <td colspan="5">总计:</td>
  139.       <td id="total-num"></td>
  140.       <td id="total-amount"></td>
  141.     </tr>
  142.   </tfoot>
  143. </table>
  144. <div class="btns">
  145.   <button>结算</button>
  146. </div>
  147. <script>
  148.   // 为了同步选择项，建立数组，其值为1为选中，0为未选中，（实现5，6，通过1或0判断单项是否有效来控制）
  149.   let checkArr = [];
  151.   // 一、全选和自选（实现1，2）
  152.   // 获取全选按钮
  153.   const checkAllBtn = document.querySelector('#check-all');
  154.   // 获取单项选择按钮
  155.   const checkItemBtns = document.querySelectorAll('input[name="itemId"]');
  156.   // 全选按钮添加点击事件，将它的状态赋值给所有单项选择按钮
  157.   checkAllBtn.addEventListener('click', checkAll, false);
  158.   function checkAll(ev) {
  159.     for (let [index, item] of checkItemBtns.entries()) {
  160.       checkArr[index] = ev.target.checked ? 1 : 0;
  161.       item.checked = ev.target.checked;
  162.     }
  163.     autoCount();
  164.   }
  165.   // 所有单项选择按钮添加点击事件，老师用change，这里用click事件感觉更为合理，当然效果目前是一样。
  166.   // 监听事件传参不能直接传参数，而是通过function((ev){函数名(ev,自定义参数)})  ******
  167.   for (let [index, item] of checkItemBtns.entries()) {
  168.     // 初始化单项状态
  169.     checkArr[index] = item.checked ? 1 : 0;
  170.     item.addEventListener(
  171.       'click',
  172.       function (ev) {
  173.         checkItem(ev, index);
  174.       },
  175.       false
  176.     );
  177.   }
  178.   function checkItem(ev, index) {
  179.     checkArr[index] = checkItemBtns[index].checked ? 1 : 0;
  180.     // 单项选择按钮点击时，就获取单项选择按钮选中的个数
  181.     const selectItemBtns = document.querySelectorAll('input[name="itemId"]:checked');
  182.     // 若选中个数等于总个数则全选，否则取消全选。老师是用计数器的方法，感觉没这种方法简洁明了。
  183.     checkAllBtn.checked = selectItemBtns.length == checkItemBtns.length ? true : false;
  184.     autoCount();
  185.   }
  187.   // 二、自动计算（实现3，4，5）
  188.   // 获取单价元素组
  189.   const unitPriceArr = document.querySelectorAll('tbody>tr>td:nth-child(5)');
  190.   // console.log(unitPriceArr[0].innerHTML);
  191.   // 获取数量输入框元素组
  192.   const inputCounterArr = document.querySelectorAll('input[name="counter"]');
  193.   // console.log(inputCounterArr[1].value);
  194.   // 获取单项总价元素组
  195.   const unitPriceTotalArr = document.querySelectorAll('tbody>tr>td:nth-child(7)');
  196.   // console.log(unitPriceTotalArr[unitPriceTotalArr.length-1].innerHTML);
  197.   // 为数量输入框添加变化事件
  198.   for (let inputCounter of inputCounterArr) {
  199.     inputCounter.addEventListener('change', autoCount, false);
  200.   }
  201.   window.addEventListener('load', autoCount, false);
  202.   function autoCount() {
  203.     console.log(checkArr);
  204.     // 获取输入数量数组，parseInt转换为整数压入数组
  205.     let inputArr = [];
  206.     let unitTotal = 0;
  207.     for (let [index, inputCounter] of inputCounterArr.entries()) {
  208.       inputArr.push(parseInt(inputCounter.value) * checkArr[index]);
  209.     }
  210.     // 计算数量总和并赋值给统计的总数，数组reduce是求和的利器。
  211.     document.querySelector('#total-num').innerHTML = inputArr.reduce((a, b) => a + b, 0);
  212.     // 改变单项总价并累加到总价上
  213.     for (let [index, unitPriceTotal] of unitPriceTotalArr.entries()) {
  214.       unitTotal += inputArr[index] * unitPriceArr[index].innerHTML * checkArr[index];
  215.       unitPriceTotal.innerHTML = inputArr[index] * unitPriceArr[index].innerHTML;
  216.     }
  217.     // 给总价赋值
  218.     document.querySelector('#total-amount').innerHTML = unitTotal;
  219.   }
  220. </script>

三、jquery实现购物车

jquery中页面和CSS都和原生一样，这里就不重复了。这里重点说下几个注意点：

  1. input的checked获取和设置问题 我们知道input的checked是布尔值，但attr()获取是字符串，这里是使用prop代替解决问题，记得也有问这个问题，查了网上资料也是难懂，还是拿出我们的利器：自己测试吗！
  1. <label for="c1">c1:</label>
  2. <input id="c1" name="checkbox" type="checkbox" checked="checked" />
  3. <label for="c2">c2:</label>
  4. <input id="c2" name="checkbox" type="checkbox" checked="true" />
  5. <label for="c3">c3:</label>
  6. <input id="c3" name="checkbox" type="checkbox" checked="" />
  7. <label for="c4">c4:</label>
  8. <input id="c4" name="checkbox" type="checkbox" checked />
  9. <label for="c5">c5:</label>
  10. <input id="c5" name="checkbox" type="checkbox" />
  11. <label for="c6">c6:</label>
  12. <input id="c6" name="checkbox" type="checkbox" checked="false" />
  13. <script>
  14. //   attr
  15. console.log('c1 attr => ',$('#c1').attr('checked'));
  16. console.log('c2 attr => ',$('#c2').attr('checked'));
  17. console.log('c3 attr => ',$('#c3').attr('checked'));
  18. console.log('c4 attr => ',$('#c4').attr('checked'));
  19. console.log('c5 attr => ',$('#c5').attr('checked'));
  20. console.log('c6 attr => ',$('#c6').attr('checked'));
  21. // prop
  22. console.log('c1 prop => ',$('#c1').prop('checked'));
  23. console.log('c2 prop => ',$('#c2').prop('checked'));
  24. console.log('c3 prop => ',$('#c3').prop('checked'));
  25. console.log('c4 prop => ',$('#c4').prop('checked'));
  26. console.log('c5 prop => ',$('#c5').prop('checked'));
  27. console.log('c6 prop => ',$('#c6').prop('checked'));
  28. </script>

attr-prop

这里要说明下，上面是测试代码是改进于脚本之家网站一篇文章，但是文章作者的结论我不赞同，我增加了内置属性和自定义属性测试，得出了attr和prop的区别:

  • 元素 内置属性并且指明 时，attr和prop都是返回属性值。
  • 元素 内置属性未指明时，attr返回undefined，prop返回false。
  • 元素 内置属性的属性值只有true或false时，如checked、selected和disabled等，attr返回属性名字符串，指明属性名时prop返回true，未指明时返回false。
  • 元素 自定义属性如data-xxx等，attr正常获取属性值，而prop则无效，返回undefined。
  1. jQuery自带迭代(自带循环)如何获取第几个成员？ 当然可以使用原生JS中for…of方法获取，这里说下jq本身就支持的简便方法 index ，它 返回数组中某成员的索引 。代码就是: let index=$('selector').index(this);

该解决的问题都进行了单独说明，下面就是实现了，基本是由原生JS转换过来的，除了上面两点，其它也没有什么了。

  1. let checkArr = [];
  2. $('input[name="itemId"]').each((index, item) => (checkArr[index] = $(item).prop('checked') ? 1 : 0));
  4. // 一、全选和自选(实现1、2)
  5. // 获取单值如checked
  6. $('#check-all').click(function () {
  7.   $('input[name="itemId"]').prop('checked', $(this).prop('checked'));
  8.   $('input[name="itemId"]').each((index, item) => (checkArr[index] = $(item).prop('checked') ? 1 : 0));  
  9.   autoCount();
  10. });
  11. $('input[name="itemId"]').click(function () {
  12.   // jq中快速获取是第几个成员的方法
  13.   let index = $('input[name="itemId"]').index(this);
  14.   checkArr[index] = $(this).prop('checked') ? 1 : 0;
  15.   $('#check-all').prop('checked', $('input[name="itemId"]:checked').length == $('input[name="itemId"]').length);
  16.   autoCount();
  17. });
  19. // 二、自动计算（实现3，4，5）
  20. window.addEventListener('load', autoCount, false);
  21. // 获取单价元素组
  22. let unitPriceArr = [];
  23. $('tbody>tr>td:nth-child(5)').each((index, item) => (unitPriceArr[index] = item.innerHTML * 1));
  24. $('input[name="counter"]').each((index, item) => { $(item).change(function (ev) { autoCount(ev, index); }); });
  25. function autoCount(ev, index) {
  26.   let goodNumArr = [];
  27.   let totalAmount = 0;
  28.   $('input[name="counter"]').each((index, item) => (goodNumArr[index] = $(item).val() * 1 * checkArr[index]));
  29.   $('#total-num').html(goodNumArr.reduce((a, b) => a + b, 0));
  30.   $('tbody>tr>td:nth-child(7)').each((index, item) => {
  31.     totalAmount += unitPriceArr[index] * goodNumArr[index] * checkArr[index];
  32.     $(item).html(unitPriceArr[index] * goodNumArr[index]);
  33.   });
  34.   $('#total-amount').html(totalAmount);
  35. }

四、vuejs实现购物车

本来是完成老师作业就完事了，后来又听了老师vuejs的课，尤其是老师用原生JS模拟实现和解释vuejs本质后，让我思路一下就开阔了，原生JS是这些一切的根基，jquery函数库、vuejs、react都是在其基础上进行了封装，更便于开发者开发，同时也降低了开发者对原生JS理解。在这些库或框架中都可混用原生JS，也可用原生JS实现，掌握了原生JS学习这些框架或库都是随手拈来。通过这几天原生JS学习，算是原生JS真正入门了，学习jquery和vuejs比以前只知道使用深刻多了，不再出现使用什么解决问题了，具体查手册就可以了，随着累积相信可以应付绝大部分问题。

vuejs在数据处理方面最强大就是双向绑定了，而购物车则也是这方面需求，我就试着改造成vuejs实现，通过测试终于完成了，下面进行简单说明

  1. 页面中数据双向绑定 数据双向绑定一定要使用v-model ，我开发过uniapp，使用最多的变量方式是:冒号，结果测试时只能随着vuejs中data数据而改变，它不能改变绑定该变量的值，后来还是使用v-model实现的，这里只是强调，双向绑定v-model指令不可少。

  2. 计算属性如何传参数 老师演示了计算属性并解释了本质，在本案例中计算单项商品总价格时，只想改变单项商品对应的总价格，如文章开头所说，需要知道索引，查了vuejs官方文档，知道了计算属性默认是get方法，还有set方法，但是不满足本题要求，后来突然想到不能传递参数是因为 计算属性一般情况下返回值是表达式，所以不能接受参数 ，那么 如果定义为返回值是函数呢？测试了下，成功 。一个非常有用的技巧呢！！！乍一看和上面监听事件中的回调函数传递参数实现类似，都是将返回值转成函数，从而接受参数。

  3. 本实现方法中全选和自选都是能完监听数据变化来完成，这样就存在一个问题，就是自选导致全选监听再一次执行全选监听，所有我们必须知道全选变化是手动还是自动，通过给全选添加自定义方法，设置开关就解决了。

  1. <table>
  2.   <caption>购物车</caption>
  3.   <thead>
  4.     <tr>
  5.       <th>
  6.         <input type="checkbox" name="checkAll" id="check-all" v-model="checkAll" v-on:input="chekcAllStatus" />
  7.         <label for="check-all">全选</label>
  8.       </th>
  9.       <th>ID</th>
  10.       <th>品名</th>
  11.       <th>单位</th>
  12.       <th>单价/元</th>
  13.       <th>数量</th>
  14.       <th>金额/元</th>
  15.     </tr>
  16.   </thead>
  17.   <tbody>
  18.     <tr>
  19.       <td>
  20.         <input type="checkbox" name="itemId" value="SN-1010" v-model="checkArr[0]" />
  21.       </td>
  22.       <td>SN-1010</td>
  23.       <td>MacBook Pro电脑</td>
  24.       <td>台</td>
  25.       <td>{{unitPriceArr[0]}}</td>
  26.       <td>
  27.         <input type="number" name="counter" v-model:value="inputArr[0]" min="1" step="1" />
  28.       </td>
  29.       <td>{{unitTotalPrice(0)}}</td>
  30.     </tr>
  31.     <tr>
  32.       <td>
  33.         <input type="checkbox" name="itemId" value="SN-1020" v-model="checkArr[1]" />
  34.       </td>
  35.       <td>SN-1020</td>
  36.       <td>iPhone手机</td>
  37.       <td>部</td>
  38.       <td>{{unitPriceArr[1]}}</td>
  39.       <td>
  40.         <input type="number" name="counter" v-model:value="inputArr[1]" min="1" step="1" />
  41.       </td>
  42.       <td>{{unitTotalPrice(1)}}</td>
  43.     </tr>
  44.     <tr>
  45.       <td>
  46.         <input type="checkbox" name="itemId" value="SN-1030" v-model="checkArr[2]" />
  47.       </td>
  48.       <td>SN-1030</td>
  49.       <td>智能AI音箱</td>
  50.       <td>只</td>
  51.       <td>{{unitPriceArr[2]}}</td>
  52.       <td>
  53.         <input type="number" name="counter" v-model:value="inputArr[2]" min="1" step="1" />
  54.       </td>
  55.       <td>{{unitTotalPrice(2)}}</td>
  56.     </tr>
  57.     <tr>
  58.       <td>
  59.         <input type="checkbox" name="itemId" value="SN-1040" v-model="checkArr[3]" />
  60.       </td>
  61.       <td>SN-1040</td>
  62.       <td>SSD移动硬盘</td>
  63.       <td>个</td>
  64.       <td>{{unitPriceArr[3]}}</td>
  65.       <td>
  66.         <input type="number" name="counter" v-model:value="inputArr[3]" min="1" step="1" />
  67.       </td>
  68.       <td>{{unitTotalPrice(3)}}</td>
  69.     </tr>
  70.     <tr>
  71.       <td>
  72.         <input type="checkbox" name="itemId" value="SN-1050" v-model="checkArr[4]" />
  73.       </td>
  74.       <td>SN-1050</td>
  75.       <td>黄山毛峰</td>
  76.       <td>斤</td>
  77.       <td>{{unitPriceArr[4]}}</td>
  78.       <td>
  79.         <input type="number" name="counter" v-model:value="inputArr[4]" min="1" step="1" />
  80.       </td>
  81.       <td>{{unitTotalPrice(4)}}</td>
  82.     </tr>
  83.   </tbody>
  84.   <tfoot>
  85.     <tr>
  86.       <td colspan="5">总计:</td>
  87.       <td id="total-num">{{totalNum}}</td>
  88.       <td id="total-amount">{{totalPrice}}</td>
  89.     </tr>
  90.   </tfoot>
  91. </table>
  92. <script>
  93. const vm = new Vue({
  94.   el: 'table',
  95.   data: {
  96.     checkAll: true,
  97.     checkArr: [true, true, true, true, true],
  98.     // 开关，防止全选和单选冲突
  99.     checkStatus: false,
  100.     unitPriceArr: [18999, 4999, 399, 888, 999],
  101.     inputArr: [3, 2, 3, 4, 5],
  102.   },
  103.   computed: {
  104.     totalNum: function () {
  105.       // return this.inputArr.reduce((a, b) => a * 1 + b * 1, 0);
  106.       let total = 0;
  107.       for (let [index, input] of this.inputArr.entries()) {
  108.         total += input * 1 * (this.checkArr[index] ? 1 : 0);
  109.       }
  110.       return total;
  111.     },
  112.     unitTotalPrice: function () {
  113.       return index => {
  114.         return this.unitPriceArr[index] * 1 * this.inputArr[index];
  115.       };
  116.     },
  117.     totalPrice: function () {
  118.       let total = 0;
  119.       for (let [index, input] of this.inputArr.entries()) {
  120.         total += this.unitPriceArr[index] * 1 * input * (this.checkArr[index] ? 1 : 0);
  121.       }
  122.       return total;
  123.     },
  124.   },
  125.   watch: {
  126.     checkAll(newVal) {
  127.       // 双向绑定数组无法直接赋值，需要转换为普通的，计算完后，使用vuejs改变即可
  128.       if (this.checkStatus) {
  129.         let checkArr = JSON.parse(JSON.stringify(this.checkArr));
  130.         for (let index of checkArr.keys()) {
  131.           checkArr[index] = newVal;
  132.         }
  133.         this.checkArr = checkArr;
  134.         this.checkStatus = false;
  135.       }
  136.     },
  137.     checkArr() {
  138.       let checkArr = JSON.parse(JSON.stringify(this.checkArr));
  139.       let checkOkArr = checkArr.filter(item => item == true);
  140.       this.checkAll = checkArr.length == checkOkArr.length ? true : false;
  141.     },
  142.   },
  143.   methods: {
  144.     chekcAllStatus: function () {
  145.       // 区分是用户选择全选，还是单项导致自动全选
  146.       this.checkStatus = true;
  147.     },
  148.   },
  149. });
  150.     </script>

Codepen演示 https://codepen.io/woxiaoyao81/pen/zYBeEoO

五、感受

原生JS、jquery函数库和vuejs框架基本学完了，前端也快基本告以段落了，朱老师深入浅出的授课让我对前端也完成了系统的梳理，相比报前最烦恼的就是前端，无论是CSS还是JS，都感觉乱，需要就百度来东拼本西凑，最后一团乱麻。现在对前端已经有了系统的认识，现在无论是语义化元素，还是CSS布局，或是JS的使用，都能快速找到解决思路，个别不清楚查下手册就可以了。我的理解都已经写在我的博文中了，可以说好多都比网上大部分文章介绍更系统更深入，相信你看了之后也会对前端有了系统的认识。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：其实,全选案例的判断单个复选框状态,使用every()方法一行就可以搞定了, 不需要计算, 我昨天将源码放到了群中, 不过,你的思路也非常的棒, 毕竟代码的可读性应该放在第一位
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录