当前位置： 首页 > article >正文

Vue小项目（开发一个购物车）

article 2024/11/25 13:30:05

基于Vue知识点1（点击跳转）、Vue知识点2（点击跳转）

​想要学习更多前端知识：点击Web前端专栏

接下来我们开发一个如下图所示，有最基本购物车功能的简易小项目

下面这是最基本的HTML+CSS框架！！！

<!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>

这时候还没有实现任何交互性的网页应用，单纯是一个静态网页，接下来看看怎么运用Vue来实现数据与视图的双向绑定，将其变成一个实用的小项目吧！

1、实现增加商品品类

 首先我们可以先定义一个 cartItems 属性，是用来存储商品的一个（响应式）数组；再通过v-for指令遍历这个数组（假设有n个品类，则生成n个商品项）；并使用 {{item.name}} 插值表达式将每个商品名称渲染出来

<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>-</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.定义属性：存储商品的（响应式）数组 
                const cartItems = reactive([
                    { name: '苹果', quantity: 1, unit_price: 1 },
                    { name: '香蕉', quantity: 1, unit_price: 1 },
                    { name: '菠萝', quantity: 1, unit_price: 1 },
                    // 可以自适应添加更多商品 
                    // { name: '芒果', quantity: 1, unit_price: 1 },
                    // { name: '鸭梨', quantity: 1, unit_price: 1 },
                ]);

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

这样商品品类有多少就会自动更新啦！ 

2、实现商品数增加

 我们可以定义一个方法 increaseQuantity 用来增加商品数，并将这个方法绑定到 click 事件上，当这个按钮被点击时就会调用这个方法；因为按钮并不是同一个按钮，我们需要用到数组 v-for 遍历出来的 index 索引来区分每一个商品的商品数和单价，并且使用{{ }} 插值表达式将它们渲染出来

<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>-</button>
            <span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span>
            <!-- 使用v-on指令，调用方法时需要用到括弧，并传入index参数 -->
            <button v-on:click="increaseQuantity(index)">+</button>
            <p>
            请输入价格：
            <input type="text"/> 元/斤 <br> 
            单价：
            {{cartItems[index].unit_price}} 元/斤
            </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.定义属性：存储商品的（响应式）数组 
                const cartItems = reactive([
                    { name: '苹果', quantity: 1, unit_price: 1 },
                    { name: '香蕉', quantity: 1, unit_price: 1 },
                    { name: '菠萝', quantity: 1, unit_price: 1 },
                    // 可以自适应添加更多商品 
                    // { name: '芒果', quantity: 1, unit_price: 1 },
                    // { name: '鸭梨', quantity: 1, unit_price: 1 },
                ]);

                // 2.定义方法：增加商品数
                const increaseQuantity = (index) => {
                    cartItems[index].quantity += 1;  
                }
                // 暴露属性和方法
                return{
                    cartItems,
                    increaseQuantity,
                }
            }
        }).mount('#app');
    </script>
</body>

这样增加商品的按钮就做好啦！

3、 实现商品数减少

 减少商品数和增加商品数差不多，只是需要注意的是商品不能减少到0，只有商品数大于1的时候才可减少；相同，我们可以定义一个方法 decreaseQuantity 用来减少商品数，并使用v-on指令将这个方法绑定到 click 事件上，当这个按钮被点击时就会调用这个方法

<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>
            <!-- 使用v-on指令，调用方法时需要用到括弧，并传入index参数 -->
            <button v-on:click="decreaseQuantity(index)">-</button>
            <span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span>
            <button v-on:click="increaseQuantity(index)">+</button>
            <p>
            请输入价格：
            <input type="text"/> 元/斤 <br> 
            单价：
            {{cartItems[index].unit_price}} 元/斤
            </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.定义属性：存储商品的（响应式）数组 
                const cartItems = reactive([
                    { name: '苹果', quantity: 1, unit_price: 1 },
                    { name: '香蕉', quantity: 1, unit_price: 1 },
                    { name: '菠萝', quantity: 1, unit_price: 1 },
                    // 可以自适应添加更多商品 
                    // { name: '芒果', quantity: 1, unit_price: 1 },
                    // { name: '鸭梨', quantity: 1, unit_price: 1 },
                ]);

                // 2.定义方法：增加商品数
                const increaseQuantity = (index) => {
                    cartItems[index].quantity += 1;  
                }
                // 3.定义方法：减少商品数
                const decreaseQuantity = (index) => {
                    if(cartItems[index].quantity > 1){   //只有商品数大于1的时候才可减少
                        cartItems[index].quantity -= 1;
                    }
                }
                // 暴露属性和方法
                return{
                    cartItems,
                    increaseQuantity,
                    decreaseQuantity,
                }
            }
        }).mount('#app');
    </script>

 这样减少商品的按钮也做好啦！

4、计算商品总数

计算商品总数可以使用计算属性 computed定义一个方法 totalItems ，然后定义一个储存商品总数的变量，遍历cartItems，取出每个商品数量将其加进变量中，最后返回变量的值；并且使用{{ }} 插值表达式将它们渲染出来（调用计算属性 computed不需要加括弧）

<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="decreaseQuantity(index)">-</button>
            <span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span>
            <button v-on:click="increaseQuantity(index)">+</button>
            <p>
            请输入价格：
            <input type="text"/> 元/斤 <br> 
            单价：
            {{cartItems[index].unit_price}} 元/斤
            </p>
        </div>
    </div>

    <!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
    <h3>商品总数:  <ins> {{totalItems}} </ins> 件</h3>
    <h3>商品总价:  <ins> 1 </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 },
                    // 可以自适应添加更多商品 
                    // { name: '芒果', quantity: 1, unit_price: 1 },
                    // { name: '鸭梨', quantity: 1, unit_price: 1 },
                ]);

                // 2.定义方法：增加商品数
                const increaseQuantity = (index) => {
                    cartItems[index].quantity += 1;  
                }
                // 3.定义方法：减少商品数
                const decreaseQuantity = (index) => {
                    if(cartItems[index].quantity > 1){
                        cartItems[index].quantity -= 1;
                    }
                }
                // 4.定义方法：计算商品总数
                const totalItems = computed(() => 
                    {
                    let total_items = 0;   //定义一个储存商品总数的变量
                    for(const item of cartItems){  //遍历cartItems，取出每个商品
                        total_items += item.quantity;  //将商品数量加进total_items
                    }
                    return total_items   //返回变量的值
                }
                )
                // 暴露属性和方法
                return{
                    cartItems,
                    increaseQuantity,
                    decreaseQuantity,
                    totalItems,
                }
            }
        }).mount('#app');
    </script>
</body>

 这样商品总数就能计算出来啦！ 

5、计算商品总价

 计算商品总价一样可以使用计算属性 computed定义一个方法 totalMoney，然后定义一个储存商品总价的变量，遍历cartItems，取出的每个商品数量乘上每个商品单价将其加进变量中，最后返回变量的值；再使用v-model指令使每个价格的文本输入框与其单价数据双向绑定，并且使用{{ }} 插值表达式将它们渲染出来（调用计算属性 computed不需要加括弧）

<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="decreaseQuantity(index)">-</button>
            <span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</span>
            <button v-on:click="increaseQuantity(index)">+</button>
            <p>
            请输入价格：
            <!-- 使用v-model指令使其双向数据绑定 -->
            <input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 
            单价：
            {{cartItems[index].unit_price}} 元/斤
            </p>
        </div>
    </div>

    <!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
    <h3>商品总数:  <ins> {{totalItems}} </ins> 件</h3>
    <h3>商品总价:  <ins> {{totalMoney}} </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 },
                    // 可以自适应添加更多商品 
                    // { name: '芒果', quantity: 1, unit_price: 1 },
                    // { name: '鸭梨', quantity: 1, unit_price: 1 },
                ]);

                // 2.定义方法：增加商品数
                const increaseQuantity = (index) => {
                    cartItems[index].quantity += 1;  
                }
                // 3.定义方法：减少商品数
                const decreaseQuantity = (index) => {
                    if(cartItems[index].quantity > 1){
                        cartItems[index].quantity -= 1;
                    }
                }
                // 4.定义方法：计算商品总数
                const totalItems = computed(() => 
                    {
                    let total_items = 0;   
                    for(const item of cartItems){
                        total_items += item.quantity;
                    }
                    return total_items
                }
                )
                // 5.定义方法：计算商品总价
                const totalMoney = computed(()=>
                    {
                    let total_money = 0;  //定义一个储存商品总数的变量
                    for(const money of cartItems){  //遍历cartItems，取出每个商品
                        total_money += money.unit_price*money.quantity;  //将每个商品数量乘上每个商品单价再加进变量total_money
                    }
                    return total_money   //返回变量的值
                })
                // 暴露属性和方法
                return{
                    cartItems,
                    increaseQuantity,
                    decreaseQuantity,
                    totalItems,
                    totalMoney
                }
            }
        }).mount('#app');
    </script>
</body>

这样一个简单的购物车小项目就做好啦！ 


http://www.kler.cn/a/408655.html

相关文章：

  • 2024最新python使用yt-dlp
  • Gradio学习笔记记录
  • 使用timm库加载模型与模型权重
  • 【Python】爬虫实战：高效爬取电影网站信息指南（涵盖了诸多学习内容）
  • 软件工程导论 选填题知识点总结
  • 丹摩|重返丹摩（下）
  • realme gt neo6官方刷机包 全量升级包下载
  • jar包解压和重新打包
  • 微信小程序 表单验证（async-validator）
  • 基于Gradle搭建Spring6.2.x版本源码阅读环境
  • Alluxio在小红书的实践：加速云端机器学习
  • HarmonyOS Next 浅谈 发布-订阅模式
  • 【热门主题】000062 云原生后端：开启高效开发新时代
  • IDEA运行程序》java: 程序包XX不存在
  • shell编程之awk
  • MySQL：IF()函数根据指定条件返回不同的值
  • 【ubuntu+win】Win10+Ubuntu22.04双系统给ubuntu系统中的某个分区进行扩容（从400G-＞800G)数据无损坏
  • Vue实训---4-使用Pinia实现menu菜单展示/隐藏
  • AWS EventBridge 和 Lambda 监控 ECS 事件并发送钉钉通知
  • Unity图形学之着色器之间传递参数
  • 《AI大模型开发笔记》——LangChain快速入门
  • 数据结构 【带环链表2】
  • spf算法、三类LSA、区间防环路机制/规则、虚连接
  • 实时数据研发|Flink关键概念，什么是无界、有界数据集，流、批？
  • 设计模式之 解释器模式
  • 什么是ROS参数服务器