亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 54
粉絲 6
評論 31
訪問量 124023
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
購物車三種實現(xiàn)(原生JS、jquery和vuejs)
吾逍遙
原創(chuàng)
3554人瀏覽過

一、購物車功能描述及實現(xiàn)思路

1、購物車功能描述

  1. 全選復選框勾選時，所有商品單項全選，全選不勾選時，所有商品單項也不勾選
  2. 商品單項有一項不勾選時，全選復選框自動不勾選，當所有商品單項勾選時，全選復選框則自動勾選
  3. 商品單項數(shù)量影響商品單項總價
  4. 商品單項數(shù)量影響商品總數(shù)量
  5. 商品單項數(shù)量影響商品總價格
  6. 商品單項是否勾選影響商品總數(shù)量
  7. 商品單項是否勾選影響商品總價格

2、實現(xiàn)思路

雖然后面采用了原生JS、jquery和vuejs實現(xiàn)，但基本思路都是一樣，尤其是核心問題的解決問題的思路。

第1項 其實就是將全選復選框的狀態(tài)賦值給每一個單項選擇即可，這樣全選和單選就同步了，無論是勾選還是不選。

第2項 我的思路和老師一樣，不過實現(xiàn)方式不一樣，老師是使用計數(shù)器，通過計數(shù)器是否等于總數(shù)來決定全選是否勾選。我的是直接 統(tǒng)計勾選的個數(shù)，和總數(shù)比較 ，相等則自動勾選全選，不等則不勾選。

第3、4、5項 為所有商品數(shù)量輸入框添加事件，在事件函數(shù)中可對商品單項總價、商品總數(shù)量和商品總價格計算。 難點在于獲取是第幾個商品數(shù)量輸入框，這樣可改變對應商品單項總價 。老師所有都是采用數(shù)組遍歷，我認為不合理，因為商品單項數(shù)量改變時其單項總價只要計算它就可以，所有都計算一遍，目前只有幾個商品沒關系，若是幾百個就會浪費不必要的時間了，降低了效率。這時就需要知道是哪個商品數(shù)量改變了，這就需要事件監(jiān)聽器添加索引就可以，可惜直接添加是無效的。下面是正確添加方式，大家可以試著理解為什么這樣就可以了??jquery也有類似實現(xiàn)，至于vuejs則是雙向綁定就簡單多了。

  1. // 監(jiān)聽事件傳參不能直接傳參數(shù)，而是通過function((ev){函數(shù)名(ev,自定義參數(shù))})  ******
  2. for (let [index, item] of checkItemBtns.entries()) {
  3.   item.addEventListener( 'click', function (ev) { checkItem(ev, index); }, false );
  4. }

第5、6項 商品單項是否勾選將影響商品總數(shù)量和總價格，至于數(shù)量和商品單項總價則不受影響。我的解決思路就是設置開關，對每個商品設置開關，若勾選則為1時計算它，不勾選則為0不計算它。這里說明下原生JS和jquery中目前唯一問題是開關對單項商品總價有影響，當然可以加兩行代碼就解決了。至于vuejs則全部實現(xiàn)了所有功能。

二、原生JS實現(xiàn)購物車

這里原生JS實現(xiàn)購物車基本就是按上面思路來完成的，具體實現(xiàn)可看下面源碼。這里唯一強調(diào)一點就是商品單項數(shù)量改變是只會改變它的單項總價、總數(shù)量和總價格這三個位置。實現(xiàn)就是用上面原理中說的給事件監(jiān)聽器的回調(diào)函數(shù)傳遞參數(shù)，也是事件監(jiān)聽器的進階用法了，大家可以參考下。

至于我勾選單項影響單項總價、總數(shù)量和總價格三個位置，如果你認為不合理可以簡單修改就可以。下面jq也是如此效果，vuejs則只影響總數(shù)量和總價格了。

  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>數(shù)量</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.   // 為了同步選擇項，建立數(shù)組，其值為1為選中，0為未選中，（實現(xiàn)5，6，通過1或0判斷單項是否有效來控制）
  149.   let checkArr = [];
  151.   // 一、全選和自選（實現(xiàn)1，2）
  152.   // 獲取全選按鈕
  153.   const checkAllBtn = document.querySelector('#check-all');
  154.   // 獲取單項選擇按鈕
  155.   const checkItemBtns = document.querySelectorAll('input[name="itemId"]');
  156.   // 全選按鈕添加點擊事件，將它的狀態(tài)賦值給所有單項選擇按鈕
  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.   // 監(jiān)聽事件傳參不能直接傳參數(shù)，而是通過function((ev){函數(shù)名(ev,自定義參數(shù))})  ******
  167.   for (let [index, item] of checkItemBtns.entries()) {
  168.     // 初始化單項狀態(tài)
  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.     // 單項選擇按鈕點擊時，就獲取單項選擇按鈕選中的個數(shù)
  181.     const selectItemBtns = document.querySelectorAll('input[name="itemId"]:checked');
  182.     // 若選中個數(shù)等于總個數(shù)則全選，否則取消全選。老師是用計數(shù)器的方法，感覺沒這種方法簡潔明了。
  183.     checkAllBtn.checked = selectItemBtns.length == checkItemBtns.length ? true : false;
  184.     autoCount();
  185.   }
  187.   // 二、自動計算（實現(xiàn)3，4，5）
  188.   // 獲取單價元素組
  189.   const unitPriceArr = document.querySelectorAll('tbody>tr>td:nth-child(5)');
  190.   // console.log(unitPriceArr[0].innerHTML);
  191.   // 獲取數(shù)量輸入框元素組
  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.   // 為數(shù)量輸入框添加變化事件
  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.     // 獲取輸入數(shù)量數(shù)組，parseInt轉(zhuǎn)換為整數(shù)壓入數(shù)組
  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.     // 計算數(shù)量總和并賦值給統(tǒng)計的總數(shù)，數(shù)組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實現(xiàn)購物車

jquery中頁面和CSS都和原生一樣，這里就不重復了。這里重點說下幾個注意點：

  1. input的checked獲取和設置問題 我們知道input的checked是布爾值，但attr()獲取是字符串，這里是使用prop代替解決問題，記得也有問這個問題，查了網(wǎng)上資料也是難懂，還是拿出我們的利器：自己測試嗎！
  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

這里要說明下，上面是測試代碼是改進于腳本之家網(wǎng)站一篇文章，但是文章作者的結論我不贊同，我增加了內(nèi)置屬性和自定義屬性測試，得出了attr和prop的區(qū)別:

  • 元素 內(nèi)置屬性并且指明 時，attr和prop都是返回屬性值。
  • 元素 內(nèi)置屬性未指明時，attr返回undefined，prop返回false。
  • 元素 內(nèi)置屬性的屬性值只有true或false時，如checked、selected和disabled等，attr返回屬性名字符串，指明屬性名時prop返回true，未指明時返回false。
  • 元素 自定義屬性如data-xxx等，attr正常獲取屬性值，而prop則無效，返回undefined。
  1. jQuery自帶迭代(自帶循環(huán))如何獲取第幾個成員？ 當然可以使用原生JS中for…of方法獲取，這里說下jq本身就支持的簡便方法 index ，它 返回數(shù)組中某成員的索引 。代碼就是: let index=$('selector').index(this);

該解決的問題都進行了單獨說明，下面就是實現(xiàn)了，基本是由原生JS轉(zhuǎn)換過來的，除了上面兩點，其它也沒有什么了。

  1. let checkArr = [];
  2. $('input[name="itemId"]').each((index, item) => (checkArr[index] = $(item).prop('checked') ? 1 : 0));
  4. // 一、全選和自選(實現(xiàn)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. // 二、自動計算（實現(xiàn)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實現(xiàn)購物車

本來是完成老師作業(yè)就完事了，后來又聽了老師vuejs的課，尤其是老師用原生JS模擬實現(xiàn)和解釋vuejs本質(zhì)后，讓我思路一下就開闊了，原生JS是這些一切的根基，jquery函數(shù)庫、vuejs、react都是在其基礎上進行了封裝，更便于開發(fā)者開發(fā)，同時也降低了開發(fā)者對原生JS理解。在這些庫或框架中都可混用原生JS，也可用原生JS實現(xiàn)，掌握了原生JS學習這些框架或庫都是隨手拈來。通過這幾天原生JS學習，算是原生JS真正入門了，學習jquery和vuejs比以前只知道使用深刻多了，不再出現(xiàn)使用什么解決問題了，具體查手冊就可以了，隨著累積相信可以應付絕大部分問題。

vuejs在數(shù)據(jù)處理方面最強大就是雙向綁定了，而購物車則也是這方面需求，我就試著改造成vuejs實現(xiàn)，通過測試終于完成了，下面進行簡單說明

  1. 頁面中數(shù)據(jù)雙向綁定 數(shù)據(jù)雙向綁定一定要使用v-model ，我開發(fā)過uniapp，使用最多的變量方式是:冒號，結果測試時只能隨著vuejs中data數(shù)據(jù)而改變，它不能改變綁定該變量的值，后來還是使用v-model實現(xiàn)的，這里只是強調(diào)，雙向綁定v-model指令不可少。

  2. 計算屬性如何傳參數(shù) 老師演示了計算屬性并解釋了本質(zhì)，在本案例中計算單項商品總價格時，只想改變單項商品對應的總價格，如文章開頭所說，需要知道索引，查了vuejs官方文檔，知道了計算屬性默認是get方法，還有set方法，但是不滿足本題要求，后來突然想到不能傳遞參數(shù)是因為 計算屬性一般情況下返回值是表達式，所以不能接受參數(shù) ，那么 如果定義為返回值是函數(shù)呢？測試了下，成功 。一個非常有用的技巧呢！?。≌б豢春蜕厦姹O(jiān)聽事件中的回調(diào)函數(shù)傳遞參數(shù)實現(xiàn)類似，都是將返回值轉(zhuǎn)成函數(shù)，從而接受參數(shù)。

  3. 本實現(xiàn)方法中全選和自選都是能完監(jiān)聽數(shù)據(jù)變化來完成，這樣就存在一個問題，就是自選導致全選監(jiān)聽再一次執(zhí)行全選監(jiān)聽，所有我們必須知道全選變化是手動還是自動，通過給全選添加自定義方法，設置開關就解決了。

  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>數(shù)量</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.       // 雙向綁定數(shù)組無法直接賦值，需要轉(zhuǎn)換為普通的，計算完后，使用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.       // 區(qū)分是用戶選擇全選，還是單項導致自動全選
  146.       this.checkStatus = true;
  147.     },
  148.   },
  149. });
  150.     </script>

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

五、感受

原生JS、jquery函數(shù)庫和vuejs框架基本學完了，前端也快基本告以段落了，朱老師深入淺出的授課讓我對前端也完成了系統(tǒng)的梳理，相比報前最煩惱的就是前端，無論是CSS還是JS，都感覺亂，需要就百度來東拼本西湊，最后一團亂麻。現(xiàn)在對前端已經(jīng)有了系統(tǒng)的認識，現(xiàn)在無論是語義化元素，還是CSS布局，或是JS的使用，都能快速找到解決思路，個別不清楚查下手冊就可以了。我的理解都已經(jīng)寫在我的博文中了，可以說好多都比網(wǎng)上大部分文章介紹更系統(tǒng)更深入，相信你看了之后也會對前端有了系統(tǒng)的認識。

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：其實,全選案例的判斷單個復選框狀態(tài),使用every()方法一行就可以搞定了, 不需要計算, 我昨天將源碼放到了群中, 不過,你的思路也非常的棒, 畢竟代碼的可讀性應該放在第一位
本博文版權歸博主所有，轉(zhuǎn)載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學