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>
相关推荐
你也向往长安城吗4 分钟前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法
imLix5 分钟前
RunLoop 实现原理
前端·ios
wayman_he_何大民11 分钟前
初始机器学习算法 - 关联分析
前端·人工智能
karrigan14 分钟前
async/await 的优雅外衣下:Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
飞飞飞仔15 分钟前
别再瞎写提示词了!这份Claude Code优化指南让你效率提升10倍
前端·claude
刘永胜是我15 分钟前
node版本切换
前端·node.js
成小白19 分钟前
前端实现表格下拉框筛选和表头回显和删除
前端
wayman_he_何大民20 分钟前
初始机器学习算法 - 聚类分析
前端·人工智能
wycode22 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
用户10922571561037 分钟前
你以为的 Tailwind 并不高效,看看这些使用误区
前端