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>
相关推荐
kadog6 分钟前
《Python3网络爬虫开发实战(第二版)》配套案例 spa6
开发语言·javascript·爬虫·python
珎珎啊7 分钟前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
HtwHUAT34 分钟前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
86Eric37 分钟前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
qq_25249639961 小时前
react 子组件暴露,父组件接收
前端·javascript·react.js
fakaifa1 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
南囝coding1 小时前
关于我的第一个产品!
前端·后端·产品
iOS阿玮1 小时前
别等了,今天是Xcode15时代的最后一天。
前端·app·apple
沙尘暴炒饭1 小时前
vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失
开发语言·前端·javascript
2401_837088501 小时前
CSS清楚默认样式
前端·javascript·css