vue购物车简单页面

最新推荐文章于 2024-06-11 12:41:07 发布

PoisonJF

最新推荐文章于 2024-06-11 12:41:07 发布

阅读量327

点赞数

文章标签： html

本文链接：https://blog.csdn.net/PoisonJF/article/details/110287594

版权

本文介绍了如何使用Vue.js创建一个简单的购物车页面，包括统计商品总价、增删商品、清空购物车以及在购物车无商品时显示特定提示。

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

购物车页面:
在这里插入图片描述
需求：统计价格，按钮增删，移除，无数据展示购物车为空

ps：该页面为bilibili视频网站截图，粘于此处，奋勉己身
页面html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>书籍购物车</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <div v-if="list.length">
  <table>
    <thead>
    <tr>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in list">
      <td>{
  {item.id}

最低0.47元/天解锁文章

PoisonJF

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue购物车简单页面

购物车页面:需求：统计价格，按钮增删，移除，无数据展示购物车为空ps：该页面为bilibili视频网站截图，粘于此处，奋勉己身页面html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>书籍购物车</title> <link rel="stylesheet" href="style.css"></hea
复制链接

扫一扫