使用 Vue + Flex 编写一个简易的购物车

最新推荐文章于 2023-08-14 08:45:00 发布

容景

最新推荐文章于 2023-08-14 08:45:00 发布

阅读量331

点赞数 2

分类专栏： Vue 学习笔记文章标签： vue javascript html flex

本文链接：https://blog.csdn.net/ySFRaabbcc/article/details/109679923

版权

本文通过Vue和Flex布局创建了一个简单的购物车应用。利用Vue的数据绑定和指令（v-for、v-on、v-if、computed）实现商品列表渲染、用户交互及商品总价计算。在商品信息数组中存储商品详情，结合flex布局展示页面效果。

摘要由CSDN通过智能技术生成

页面布局采用 flex 布局，元素渲染、用户操作采用 Vue。
（ps：对这几天学习 Vue 的一个简单实践，略菜，轻喷 QAQ）

（1）数组保存商品信息

首先我们将商品信息放在数组中，并将该数组保存在 Vue 实例的数据对象中。
商品信息包括：id、图片 url、商品名、商品单价、库存、当前选择数量。

let shopArr = [
    {
   id: 1, url: './img/1.jpg', title: '大豆家 方头奶奶鞋', money: 118, num: 20, need: 0},
    {
   id: 2, url: './img/2.jpg', title: '家宝路转角水槽', money: 799, num: 10, need: 0},
    {
   id: 3, url: './img/3.jpg', title: 'LANCOME秋冬限量迷雾红管唇膏', money: 235, num: 33, need: 0},
    {
   id: 4, url: './img/4.jpg', title: '汽车盲点变道辅助系统', money: 1980, num: 8, need: 0},
    {
   id: 5, url: './img/5.jpg', title: 'PUMA芥末绿复古老爹鞋', money: 529, num: 35, need: 0},
    {
   id: 6, url: './img/6.jpg', title: '美之岛主雾面哑光丝绒口红', money: 599, num: 18, need: 0},
    {
   id: 7, url: './img/7.jpg', title: '马儿跑 开马瑞眼镜', money: 22000, num: 6, need: 0},
    {
   id: 8, url: './img/8.jpg', title: '不二橘英伦风切尔西鞋', money: 308, num: 33, need: 0},
    {
   id: 9, url: './img/9.jpg', title: 'PUMA克莱德联名水晶鞋', money: 487, num: 10, need: 0}
   ];

（2）v-for 渲染商品列表

接下来利用 v-for 渲染商品列表。

<div id="app">
   <p>总价：{
  { sum }}</p>
   <ul>
    <li v-for="(item, index) in arr" v-bind:key="item.id" v-if="item.num > 0">
     <div>
      <img v-bind:src="item.url" alt="boom">
     </div>
     <div>
      <span>{
  { item.title }}</span>
      <span>$:{
  { item.money }}</span>
      <span>库存：{
  { item.num }}