文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 购物车案例练习

2024-04-02 19:55

关注

1.购物车案例

经过一系列的学习,我们这里来练习一个购物车的案例

需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,

然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,

总体效果如下:

2.代码实现


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <style>
    table{
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
    }
    th,td{
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
    }
    th{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-if="books.length">
    <table>
      <thread>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thread>
      <tbody>
      <tr v-for="(book, index) in books" :key="book">
        <td>{{index+1}}</td>
        <td>{{book.name}}</td>
        <td>{{book.publish_date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>
          {{book.count}}
          <button @click="increase(index)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <p>总价:{{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>购物车为空</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books: [
        {"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0},
        {"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0},
      ],
    },
    methods: {
      // 增加+
      decrease(index){
        this.books[index].count-=1
      },
      // 减少-
      increase(index){
        this.books[index].count+=1
      },
      // 移除按钮
      removeClick(index){
        this.books.splice(index, 1)
      }
    },
    computed: {
      // 计算总价格
      totalPrice(){
        let totalPrice = 0
        for (let item of this.books){
          totalPrice += item.price * item.count
        }
        return totalPrice
      }
    },
    // 过滤器,将价格过滤成有2位小数的
    filters: {
      showPrice(price){
        return '¥' + price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>

3.总结

v-for:循环,循环books列表
v-on:事件监听,监听点击事件
disabled:按钮是否可以点击的属性,为True可点击,为False不可点击,增加判断条件:disabled="book.count <= 0"当购物车数量≤0,则无法点击
v-if和v-else:条件判断,判断books的列表长度,如果有长度展示列表,如果长度为0则展示文字购物车为空
filters:自定义过滤器,过滤价格,使本身的价格过滤后带有2位小数
computed:计算属性,计算购物的总价格

到此这篇关于Vue 购物车案例练习的文章就介绍到这了,更多相关Vue 购物车练习内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯