Vue框架开发一个简单的购物车（Vue.js）

让我们利用所学知识来开发一个简单的购物车

（记得暴露属性和方法！！！）

首先来看一下最基本的一个html框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战小项目:购物车</title>
 
    <style>
      body {
          font-family: Arial, sans-serif;
      }
      .cart-item {
          width: 50%;
          margin-bottom: 15px;
          padding: 10px;
          border: 2px solid gray;
          border-radius: 10px;
          background-color: #ddd;
      }
      .buttons {
          margin-top: 5px;
      }
      .buttons button {
          padding: 5px 10px;
          margin-right: 5px;
          font-size: 16px;
          cursor: pointer;
          border: none;
          border-radius: 3px;
          background-color: pink;
      }
      .buttons input {
          width: 25px;
      }
      .buttons button:hover {
          background-color: yellow;
      }
      .quantity {
          font-size: 18px;
          font-weight: bold;
          margin-left: 10px;
      }
      h1, h2 {
          color: #333;
      }
  </style>
</head>
<body>
    <div id="app">
      <h1>实战小项目:购物车</h1>
 
    <!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项-->
    <div class="cart-item">
        <div class="buttons">
            <span>苹果 &nbsp;&nbsp;</span>
            <button>-</button>
            <span class="quantity">1&nbsp;&nbsp;</span>
            <button>+</button>
            <p>
            请输入价格：
            <input type="text"/> 元/斤 <br> 
            单价：
            1 元/斤
            </p>
        </div>
    </div>
 
    <!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
    <h3>商品总数:  <ins> 1 </ins> 件</h3>
    <h3>商品总价:  <ins> 1 </ins> 元</h3>
 
    </div>
 
    <script type="module">
      import { createApp, reactive, computed } from './vue.esm-browser.js'
        createApp({
            setup() {
 
                // 1.定义属性：存储商品的（响应式）数组 
 
                // 2.定义方法：增加商品数
 
                // 3.定义方法：减少商品数
 
                // 4.定义方法：计算商品总数
 
                // 5.定义方法：计算商品总价
 
                // 6.暴露属性和方法
            }
        }).mount('#app');
    </script>
</body>
</html>

效果如下：

目前是一个静态的一个网页

首先定义属性：存储商品的（响应式）数组（使用v-for遍历）

  <div class="cart-item" v-for="(item,index) in cartItems">


const cartItems = reactive([
                    { name: '苹果', quantity: 1, unit_price: 1 },
                    { name: '香蕉', quantity: 1, unit_price: 1 },
                    { name: '菠萝', quantity: 1, unit_price: 1 },
                    
                ]);

我们可以发现我们已经做出了三个链接，但是名字都是苹果，这个时候我们添加一个插值即可

<span>{{item.name}}&nbsp;&nbsp;</span>

那么我们如何控制商品的增加和减少呢

我们只需要定义一个函数并且使用v-on的方法绑定即可，事件触发为点击

注意：在做减少按钮时，我们要通过if判断限制一下商品数，否则会出现负数

 <button v-on:click = "pre(index)">-</button>
 <span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span>
  <button v-on:click = "next(index)">+</button>



// 2.定义方法：增加商品数
                  const next = (index) =>{
                    cartItems[index].quantity ++;
                    
                 
                  }                             
                // 3.定义方法：减少商品数
                const pre = (index) => {
                    if ( cartItems[index].quantity>1) {
                        cartItems[index].quantity --;
                    }
                    
                                               }

接着我们要计算商品的总数，那么该如何计算呢

可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价

   <h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3>

 // 4.定义方法：计算商品总数
                const totalItem = () =>{
                    let total_items = 0 ;
                    for(const item of cartItems){
                    total_items +=item.quantity;
 
                   }
                   return total_items
                }

计算完总数，我们就该来计算总价了，同理可得使用computer计算属性，定义一个变量，在函数里面写一个for遍历即可（输入框里面属于写一个双向绑定v-model从而实现单价变化总价随着变化）

        <input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 

 <h3>商品总价:  <ins> {{totalprice}} </ins> 元</h3>



   // 5.定义方法：计算商品总价
               const totalprice = computed(()=>
                    {
                    let total_price = 0;  
                    for(const money of cartItems){  
                        total_price += money.unit_price*money.quantity;  
                    }
                    return total_price  
                })

这样我们一个简单的购物车便开发成功啦

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战小项目:购物车</title>

    <style>
      body {
          font-family: Arial, sans-serif;
      }
      .cart-item {
          width: 50%;
          margin-bottom: 15px;
          padding: 10px;
          border: 2px solid gray;
          border-radius: 10px;
          background-color: #ddd;
      }
      .buttons {
          margin-top: 5px;
      }
      .buttons button {
          padding: 5px 10px;
          margin-right: 5px;
          font-size: 16px;
          cursor: pointer;
          border: none;
          border-radius: 3px;
          background-color: pink;
      }
      .buttons input {
          width: 25px;
      }
      .buttons button:hover {
          background-color: yellow;
      }
      .quantity {
          font-size: 18px;
          font-weight: bold;
          margin-left: 10px;
      }
      h1, h2 {
          color: #333;
      }
  </style>
</head>
<body>
    <div id="app">
      <h1>实战小项目:购物车</h1>

    <!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项-->
    <div class="cart-item" v-for="(item,index) in cartItems">
        <div class="buttons">
            <span>{{item.name}}&nbsp;&nbsp;</span>
            <button v-on:click = "pre(index)">-</button>
            <span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span>
            <button v-on:click = "next(index)">+</button>
            <p>
            请输入价格：
            <input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 
            单价：
            1 元/斤
            </p>
        </div>
    </div>


    <!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
    <h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3>
    <h3>商品总价:  <ins> {{totalprice}}</ins> 元</h3>


    </div>

    <script type="module">

      import { createApp, reactive, computed } from './vue.esm-browser.js'

        createApp({
            setup() {

                // 1.定义属性：存储商品的（响应式）数组 
                const cartItems = reactive([
                    { name: '苹果', quantity: 1, unit_price: 1 },
                    { name: '香蕉', quantity: 1, unit_price: 1 },
                    { name: '菠萝', quantity: 1, unit_price: 1 },
                    
                ]);

                // 2.定义方法：增加商品数
                  const next = (index) =>{
                    cartItems[index].quantity ++;
                    
                 
                  }                             
                // 3.定义方法：减少商品数
                const pre = (index) => {
                    if ( cartItems[index].quantity>1) {
                        cartItems[index].quantity --;
                    }
                    
                                               }

                // 4.定义方法：计算商品总数
                   const totalItem = () =>{
                    let total_items = 0 ;
                    for(const item of cartItems){
                    total_items +=item.quantity;
 
                   }
                   return total_items
                }

                // 5.定义方法：计算商品总价
                const totalprice = computed(()=>
                    {
                    let total_price = 0; 
                    for(const money of cartItems){  
                        total_price += money.unit_price*money.quantity;  
                    }
                    return total_price   
                })
         



                // 6.暴露属性和方法
                return {
                    cartItems,
                    pre,
                    next,
                    totalItem,
                    totalprice,
                };
            },
        }).mount('#app');
    </script>
</body>
</html>