• 【vue-9】购物车案例

    • 前导知识点：

    1、table表格标签

    是用于定义表格的标签；

    <thead> 表头部（放表格的标题之类）；
    <tbody> 表主体（放表格主体数据）；

      表脚注（放表格脚注）；
    标签用于定义表格中的行，必须嵌套在

    标签中；
      用于定义表格中的单元格，即数据单元格的内容，必须嵌套在标签中；  

     表格样式设置：

    1. <style>
    2.     table {
    3.         width: 600px;
    4.         color: 8f8e8e;
    5.         text-align: center;
    6.         border-collapse: collapse;
    7.     }
    8.     table thead {
    9.         background-color: aqua;
    10.     }
    11.     table tr {
    12.         height: 30px;
    13.         line-height: 30px;
    14.         border: 1px solid #ececec;
    15.     }
    16. style>

    2、let声明变量

     let和var的作用差不多，但let声明的范围是块作用域，而var声明的范围是函数作用域。 

    • 实现效果： 

    • 使用change事件实现购物车功能

    完整示例代码： 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         table {
    9.             width: 600px;
    10.             color: 8f8e8e;
    11.             text-align: center;
    12.             border-collapse: collapse;
    13.         }
    14.         table thead {
    15.             background-color: aqua;
    16.         }
    17.         table tr {
    18.             height: 30px;
    19.             line-height: 30px;
    20.             border: 1px solid #ececec;
    21.         }
    22.     </style>
    23. </head>
    24. <body>
    25.     <div id="app">
    26.         <table>
    27.             <thead>
    28.                 <tr>
    29.                     <td><input type="checkbox" v-model="data.selected" @change="selectAll"/></td>
    30.                     <td>商品</td>
    31.                     <td>单价</td>
    32.                     <td>库存</td>
    33.                     <td colspan="2">操作</td>
    34.                 </tr>
    35.             </thead>
    36.             <tbody>
    37.                 <tr v-for="(value, index) in data.list">
    38.                     <td><input type="checkbox" :value="value" v-model="data.checkboxList" @change="checkSelect"/></td>
    39.                     <td>{{value.name}}</td>
    40.                     <td>{{value.price}}</td>
    41.                     <td>{{value.stock}}</td>
    42.                     <td>
    43.                         <button @click="sub(value)">-</button>
    44.                         {{value.number}}
    45.                         <button @click="add(value)">+</button>
    46.                     </td>
    47.                     <td><button @click="del(index,value.id)">删除</button></td>
    48.                 </tr>
    49.             </tbody>
    50.             <tfoot>
    51.                 <tr>
    52.                     <td>总价{{totalPrice()}}</td>
    53.                 </tr>
    54.             </tfoot>
    55.         </table>
    56.     </div>
    57.     <script type="module">
    58.         import {createApp, reactive} from './vue.esm-browser.js'
    59.         // const {createApp, reactive} = Vue
    60.         createApp({
    61.             // setup选项，用于设置响应式数据和方法等
    62.             setup(){ 
    63.                 const data = reactive({
    64.                     selected:false,
    65.                     checkboxList:[],
    66.                     list:[{
    67.                         id:1,
    68.                         name:"铅笔",
    69.                         price:10,
    70.                         number:5,
    71.                         stock:20
    72.                     },
    73.                     {
    74.                         id:2,
    75.                         name:"鼠标",
    76.                         price:20,
    77.                         number:5,
    78.                         stock:8
    79.                     },
    80.                     {
    81.                         id:3,
    82.                         name:"键盘",
    83.                         price:40,
    84.                         number:4,
    85.                         stock:7
    86.                     }],
    87.                 })
    88.                 const selectAll = () =>{
    89.                     console.log(data.selected)
    90.                     if(data.selected){
    91.                         data.checkboxList = data.list
    92.                     }
    93.                     else{
    94.                         data.checkboxList = []
    95.                     }
    96.                     console.log(data.checkboxList)
    97.                 }
    98.                 const checkSelect = () =>{
    99.                     if (data.checkboxList.length == data.list.length && data.list.length != 0){
    100.                         data.selected = true
    101.                     }
    102.                     else{
    103.                         data.selected = false
    104.                     }
    105.                 }
    106.                 const totalPrice = () =>{
    107.                     let total = 0
    108.                     console.log(data.checkboxList)
    109.                     for(let i = 0; i < data.checkboxList.length; i++){
    110.                         total += data.checkboxList[i].price*data.checkboxList[i].number
    111.                     }
    112.                     return total
    113.                 }
    114.                 const sub = (value) =>{
    115.                     value.number --
    116.                     if(value.number <= 1){
    117.                         value.number = 1
    118.                     }
    119.                 }
    120.                 const add =(value) =>{
    121.                     value.number++
    122.                     if(value.number >= value.stock){
    123.                         value.number = value.stock
    124.                     }
    125.                 }
    126.                 const del = (index,id) =>{
    127.                     data.list.splice(index,1)
    128.                     let newArr = data.checkboxList.filter((value,index) =>{
    129.                         return value.id != id
    130.                     })
    131.                     data.checkboxList = newArr
    132.                     checkSelect()
    133.                 }
    134.                 return{
    135.                     data,
    136.                     selectAll,
    137.                     checkSelect,
    138.                     totalPrice,
    139.                     add,
    140.                     sub,
    141.                     del          
    142.                 }
    143.             }
    144.         }).mount("#app")
    145.         // mount为挂载
    146.     </script>
    147. </body>
    148. </html>
    • 使用watch侦听器与computed计算属性优化购物车案例 

    去掉checkbox的change事件，添加如下代码： 

    1. let flag = true
    2. watch(()=>data.selected,(newValue,oldValue)=>{                    
    3.     // console.log("newValue:",newValue,"oldValue:",oldValue)
    4.     if(newValue){
    5.         data.checkboxList = data.list
    6.     }
    7.     else{
    8.         if(flag){
    9.             data.checkboxList = []
    10.         }                       
    11.     }                    
    12. })
    13.  
    14. watch(()=>data.checkboxList,(newValue,oldValue)=>{                    
    15.     console.log("newValue:",newValue.length,"oldValue:",oldValue)
    16.     console.log(data.list.length)
    17.     if (newValue.length == data.list.length && data.list.length != 0){
    18.         data.selected = true
    19.         flag = true
    20.     }
    21.     else{
    22.         flag = false
    23.         data.selected = false
    24.     }                 
    25. })
    26.  
    27. const totalPrice = computed(() => {
    28.     return data.checkboxList.reduce((total, item) => total + item.price * item.number, 0)
    29. })

    reduce定义：用于对数组中所有元素进行迭代操作，并将每次操作的结果累加到一个初始值上；

    输入参数：累加器函数、初始值，total(累加器)用于存储每次计算的结果，初始值为0，item(当前元素)在每次迭代过程中，当前元素的值会被传递给回调函数；

  • 相关阅读:
    Qt 5.15.2 Windows 子目录项目: undefined reference to `vtable for xxx‘
    Spring Boot 开发 -- swagger3.0 集成
    Ph.D，指哲学博士学位
    DeepLearning[花书] 参考资料
    树形DP杂题
    羊大师揭秘，羊奶料理秘诀
    智能晾衣架丨以科技解放双手
    计算机毕业设计SSM电影网站系统设计【附源码数据库】
    时间轴_数据存储
    C语言的核心和灵魂
  • 原文地址：https://blog.csdn.net/WXG1011/article/details/139632925