【Vue】——组件的注册与引用（二）

最新推荐文章于 2024-08-25 09:57:22 发布

Y小夜

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量823

点赞数 24

分类专栏：前端vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/shsjssnn/article/details/138548767

版权

前端vue.js 专栏收录该内容

10 篇文章 5 订阅

订阅专栏

💻博主现有专栏：

C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

Y小夜-CSDN博客

学习推荐：

人工智能是一个涉及数学、计算机科学、数据科学、机器学习、神经网络等多个领域的交叉学科，其学习曲线相对陡峭，对初学者来说可能会有一定的挑战性。幸运的是，随着互联网教育资源的丰富，现在有大量优秀的在线平台和网站提供了丰富的人工智能学习材料，包括视频教程、互动课程、实战项目等，这些资源无疑为学习者打开了一扇通往人工智能世界的大门。

前些天发现了一个巨牛的人工智能学习网站：前言 – 人工智能教程通俗易懂，风趣幽默，忍不住分享一下给大家。

🎯本文目的

(一)掌握vue项目中组件的注册与引用；

(二)通过综合案例掌握vue的基本语法。

🎯实现一个“购物车”

🎃要求

要求：1、单击“+”“-”按钮对应数量可以改变，相应的合计、总价也要重新计算。

2、当某个商品数量为0时，其“-”按钮为不可用状态。

🎃代码解析

<template>
    <h1 style="text-align: center;">软工</h1>
    <table border="1" align="center" width="400px">
      <caption><h2>购物车</h2></caption>
      <tr align="center" >
        <td>名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>合计</td>
      </tr>
      <tr align="center" v-for="(item,index) in list" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td >
          <button @click="sub(index)" :disabled="item.count==0?true:false">-</button>
          {{item.count}}
          <button @click="add(index)">+</button>
        </td>
        <td>{{item.price*item.count}}</td>
      </tr>
      <tr align="center" >
        <td>总价</td>
        <td  colspan="3" >{{ computedname }}</td>
      </tr>
    </table>
  </template>

  <script setup>
  import { computed, reactive,} from 'vue'
      const list = reactive([
          {id:1,name: '华为mate30',price: 4566,count: 2},
          {id:2,name: '华为mate40',price: 4166,count: 3},
          {id:3,name: '苹果X',price: 5200,count: 2},
          {id:4,name: 'OPPO',price: 2180,count: 4}
        ])
        const sub = (index)=>{
            if(list[index].count>0){
                list[index].count--
            }
        }
        const add = (index)=>{
            list[index].count++
        }
        const computedname = computed(()=>{
            let prices = 0
            list.forEach((item)=>{
                prices += item.price * item.count
            })
            return prices
        })
  </script>
这段代码是一个使用Vue.js框架编写的购物车页面。它包含了一个表格，用于展示商品的名称、单价、数量和合计。用户可以通过点击"+"和"-"按钮来增加或减少商品的数量。同时，表格下方显示了商品的总价。

代码的主要部分包括：

1. HTML模板：定义了一个包含标题和表格的HTML结构。表格中的每一行都使用`v-for`指令遍历`list`数组，动态生成商品信息。每一行的最后一个单元格使用了计算属性`computedname`来计算该行的合计金额。

2. Vue.js组件：使用Vue.js的`reactive`函数创建了一个响应式的数据对象`list`，其中包含了商品的信息（名称、单价、数量）。

3. 方法：定义了两个方法`sub`和`add`，分别用于减少和增加商品的数量。这两个方法通过传入商品的索引来实现对特定商品的操作。

4. 计算属性：使用Vue.js的`computed`函数创建了一个计算属性`computedname`，用于计算所有商品的总价。它通过遍历`list`数组，将每个商品的价格乘以数量，并将结果累加到变量`prices`中。最后返回`prices`作为总价。

这段代码的功能是实现了一个简单的购物车页面，用户可以查看商品信息、修改商品数量以及计算总价。

🎃运行效果

🎯影院订票系统前端页面

🎃要求

要求：1、掌握Vue的基本语法。

      2、一次最多能购买五张电影票。

      3、显示购买电影票的位置、单价、总价。

      4、可选电影票、选中电影票、售过电影票要有图形颜色或样式区别。

      5、要能使用图形方式进行电影座位的选择。

🎃代码解析

<template>
    <h1>软工</h1>
    <div class="film">
      <!--电影购票左边  -->
      <div class="filmLeft">
        <h3>屏幕</h3>
        <ul>
          <li v-for="(item, index) in seatflag" :key="index" class="seat" :class="{
            noSeat: seatflag[index] == -1,
            seatSpace: seatflag[index] == 0,
            seatActive: seatflag[index] == 1,
            seatNoUse: seatflag[index] == 2,
          }" @click="handleClick(index)"></li>
        </ul>
      </div>
       <!-- 电影购票右边 -->
    <div class="filmRight">
      <div class="rightTop">
        <div class="rightTopleft">
          <a href="#">
            <img :src="filmInfo.filmImg" alt="..." height="200" />
          </a>
        </div>
        <div class="rightTopRight">
          <p>
            中文名：<strong>{{ filmInfo.name }}</strong>
          </p>
          <p>英文名：{{ filmInfo.nameEnglish }}</p>
          <p>剧情：{{ filmInfo.storyType }}</p>
          <p>版本：{{ filmInfo.copyRight }}</p>
          <p>{{ filmInfo.place }} / {{ filmInfo.timeLength }}</p>
          <p>{{ filmInfo.timeShow }}</p>
        </div>
      </div>

      <div class="rightBootom">
        <p>影院：<strong>{{ filmInfo.cinema }}</strong> </p>
        <p>影厅：<strong>{{ filmInfo.room }}</strong></p>
        <p>场次：<strong>{{ filmInfo.time }}</strong></p>
        <p id="seatSelect">
          座位：<span v-for="(item, index) in userFilmMsg.curSeatDisp" :key="index">{{
            item+" "
          }}</span>
        </p>
        <p>
          已选择<strong style="color: red">{{ userFilmMsg.count }}</strong>个座位，<strong style="color: red">再次单击座位可取消。
            <span v-if="userFilmMsg.maxFlag">您一次最多只能买五张票！</span></strong>
        </p>
        <hr />
        <p>
          单价：<strong>{{ numberFormat(filmInfo.unitPrice) }}</strong>
        </p>
        <p>
          总价：<strong style="color: red">{{numberFormat(fileTotal)}}</strong>
        </p>
        <hr />
        <button type="button" class="btn" @click="filmSubmit">确认下单</button>
 </div>

    </div>

    </div>

  </template>
  
  <script setup>
  import { reactive} from "vue";
  const seatflag = reactive(//0表示空座，-1表示没有座位，1表示被选中座位,2表示已购买座位
    [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0,
      2, 2, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, -1, -1, -1, 0, 0, 0, 0, 0, 0,
      -1, -1,
    ]
  )
  const filmInfo = reactive({
  name: "囧妈",
  nameEnglish: "Lost in Russia",
  copyRight: "中文2D",
  filmImg: '/src/assets/film1.png',
  storyType: "喜剧",
  place: "中国大陆",
  timeLength: "126分钟",
  timeShow: "2020.02",
  cinema: "万达影城",
  room: "8号影厅",
  time: "2021.05.18（周二）20:00",
  unitPrice: 38,
})
import {computed} from "vue"
const userFilmMsg = reactive({
  curSeat: [],
  curSeatDisp: [],
  count: 0,
  maxLength: 5,
  maxFlag: false,
  seatCol: 10,
}) 
// 数据格式化方法
 const numberFormat = (value) => "￥" + value.toFixed(2);

// 计算属性计算总票价
const fileTotal = computed(() => {
  return userFilmMsg.count * filmInfo.unitPrice;
});
// 单击座位事件处理方法
const handleClick = (index) => {
      if (seatflag[index] === 1) {
        seatflag[index] = 0;
        userFilmMsg.curSeat.splice(
          userFilmMsg.curSeat.findIndex((item) => item === index),
          1
        );
      } else {
        // 判断单击座位是否是可选座位并且选中座位数小于5
        if (seatflag[index] === 0 && userFilmMsg.curSeat.length < 5) {
          seatflag[index] = 1;
          userFilmMsg.curSeat.push(index);  //将选中座位的下标进行存储
        }
      }
      // 设置当前选中的座位
      userFilmMsg.curSeatDisp = [];
      for (const data of userFilmMsg.curSeat) {
        userFilmMsg.curSeatDisp.push(
          Math.floor(data / userFilmMsg.seatCol) +1 +"行" +((data % userFilmMsg.seatCol) + 1) +"列");
      }
      // 计数已经选择了多少个座位
      var mySeat = seatflag.filter((item) => item === 1);
      userFilmMsg.count = mySeat.length;
      // 判断达到购买上限
      if (userFilmMsg.count >= 5) userFilmMsg.maxFlag = true;
      else userFilmMsg.maxFlag = false;
    }
    // “确认提交”按钮
    const filmSubmit=()=>{
      var flag=confirm("确认提交吗？")
      if(flag)  alert("已提交！")
}

  </script>
  
  <style scoped>
  h1 {
    text-align: center;
  }
  
  .film {
    margin: 0 auto;
    width: 1050px;
    border: 1px solid grey;
    height: 550px;
  }
  
  .filmLeft {
    width: 550px;
    height: 500px;
    float: left;
  }
  
  .filmLeft h3 {
    text-align: center;
  }
  
  .filmLeft ul li {
    list-style: none;
  }
  
  .seat {
    float: left;
    width: 30px;
    height: 30px;
    background-color: bisque;
    margin: 5px 10px;
    cursor: pointer;
  }
  
  .seatNotice {
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    background-color: bisque;
    list-style: none;
    margin-left: 50px;
  }
  
  .notice {
    float: left;
    height: 30px;
    line-height: 30px;
  }
  /* 空位置 */
  .seatSpace {
    background: url("/src/assets/bg.png")no-repeat 1px -29px;
  }
  /* 被选中座位 */
  .seatActive {
    background: url("/src/assets/bg.png") 1px 0px;
  }
  /* 已经购买座位 */
  .seatNoUse {
    background: url("/src/assets/bg.png") 1px -56px;
  }
  /* 没有位置 */
  .noSeat {
    background: url("/src/assets/bg.png") 1px -84px;
  }
  .filmRight {
  width: 500px;
  height: 580px;
  float: left;
  background-color: bisque;
}

.rightTopleft {
  float: left;
  margin: 20px 15px 5px 10px;
}

.rightTopRight {
  text-align: center;
  float: left;
  margin: 0px 0px 5px 5px;
}

.rightBootom {
  text-align: center;
  clear: both;
  margin: 0px 10px;
}

#filmInformation,
#filmRightTopLeft {
  float: left;
}

#filmRightBottom {
  clear: both;
}
.btn{
  margin-top: 8px;
  color: #fff;
  background-color: cadetblue;
  border: none;
  padding: 5px 10px;
}

  </style>

这段代码是一个Vue.js应用程序，用于实现电影购票功能。它包括一个电影票购买页面，用户可以在页面上选择座位并提交订单。

代码的主要结构如下：

1. 引入Vue.js库和相关依赖。
2. 定义了一个名为`seatflag`的响应式数组，用于存储座位的状态（0表示空座，-1表示没有座位，1表示被选中座位，2表示已购买座位）。
3. 定义了一个名为`filmInfo`的响应式对象，用于存储电影信息（名称、英文名称、版权、图片、剧情类型、地点、时长、放映时间、票价等）。
4. 定义了一个名为`userFilmMsg`的响应式对象，用于存储用户选择的座位信息（当前选中的座位、显示的座位、计数、最大长度、是否达到购买上限等）。
5. 定义了一个名为`numberFormat`的函数，用于将票价格式化为带有货币符号的形式。
6. 定义了一个名为`fileTotal`的计算属性，用于计算总票价。
7. 定义了一个名为`handleClick`的事件处理方法，用于处理用户点击座位的事件。
8. 定义了一个名为`filmSubmit`的方法，用于处理用户点击“确认提交”按钮的事件。
9. 使用`<template>`标签定义了HTML模板结构，包括电影票购买页面的布局和样式。
10. 使用`<style>`标签定义了CSS样式，用于美化页面。

代码的功能如下：

1. 用户可以通过点击座位来选择或取消选择座位。
2. 用户可以选择最多5个座位。
3. 当用户选择座位时，会实时更新已选座位的数量和总票价。
4. 用户点击“确认提交”按钮后，会弹出确认框，如果用户确认提交，则显示“已提交！”的提示信息。

这段代码使用了Vue.js框架的一些核心特性，如响应式数据、计算属性、事件处理等，实现了一个简单的电影票购买功能。