Vue学习Day02-案例（购物车案例练习）

最新推荐文章于 2022-05-05 00:14:14 发布
最新推荐文章于 2022-05-05 00:14:14 发布
阅读量188 收藏 2
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43748856/article/details/119086757
版权

要求：
在这里插入图片描述
点击加号或减号时，下面的总价要跟着改变，点移除操作时，要将记录删除掉，并且当内容为空时，显示文字：购物车为空。

以下是自己写的：
1.界面搭建

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <style type="text/css">
    .header{
      background-color: rgb(221, 220, 220);
      text-align: center;
      font-style: normal;
      color:rgb(75, 74, 74);
    }
    button{
      border-radius: 10%;
      background-color: white;
    }
  </style>
</head>

<body>
  <table border="1" cellspacing="0" cellpadding="12" style="text-align: center;border-color: aliceblue;">
    <tr class="header">
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>

    <tr>
      <td>1</td>
      <td>《算法导论》</td>
      <td>2006-9</td>
      <td>￥85.00</td>
      <td>
        <sapn><button>-</button> 1 <button>+</button></sapn>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>

    <tr>
      <td>2</td>
      <td>《UNIX编程艺术》</td>
      <td>2006-2</td>
      <td>￥59.00</td>
      <td>
        <sapn><button>-</button> 1 <button>+</button></sapn>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>

    <tr>
      <td>3</td>
      <td>《编程珠玑》</td>
      <td>2006-10</td>
      <td>￥39.00</td>
      <td>
        <sapn><button>-</button> 1 <button>+</button></sapn>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>

    <tr>
      <td>4</td>
      <td>《代码大全》</td>
      <td>2008-10</td>
      <td>￥139.00</td>
      <td>
        <sapn><button>-</button> 1 <button>+</button></sapn>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>
  </table>
  <p>总价:￥311.00</p>
</body>
</html>

凑合看吧，写了个长得差不多的
在这里插入图片描述
2.对搭建的界面进行整理，创建vue实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <style type="text/css">
    .header{
      background-color: rgb(221, 220, 220);
      text-align: center;
      font-style: normal;
      color:rgb(75, 74, 74);
    }
    button{
      border-radius: 10%;
      background-color: white;
    }
  </style>
</head>

<body>
  <div id="car">
  <table border="1" cellspacing="0" cellpadding="12" style="text-align: center;border-color: aliceblue;">
      <tr class="header">
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>

      <tr v-for="(item,index) in BookMessage">
        <td>{{index+1}}</td>
        <td>{{item.bookname}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price}}</td>
        <td>
          <span><button>-</button> {{item.number}} <button>+</button></sapn>
        </td>
        <td>
          <button>移除</button>
        </td>
      </tr>

    </table>
    <p>总价:￥{{SumPrice}}</p>
  </div>
 
</body>
<script>
  const car = new Vue({
    el:'#car',
    data: {
      BookMessage:[
        {
          id:1,
          bookname:"《算法导论》",
          date:"2006-9",
          price:85.00,
          number:1,
        },
        {
          id:2,
          bookname:"《UNIX编程艺术》",
          date:"2006-2",
          price:59.00,
          number:1,
        },
        {
          id:3,
          bookname:"《编程珠玑》",
          date:"2006-10",
          price:39.00,
          number:1,
        },
        {
          id:4,
          bookname:"《代码大全》",
          date:"2008-10",
          price:139.01,
          number:1,
        },
      ],
    },

    computed:{
      SumPrice:function(){
        let sum = 0;
        for(let Book of this.BookMessage){
          sum += Book.price*Book.number;
        }
        return sum;
      },
    },


  })

</script>
</html>

在这里插入图片描述

3.为按钮添加方法并且改进之后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <style type="text/css">
    .header{
      background-color: rgb(221, 220, 220);
      text-align: center;
      font-style: normal;
      color:rgb(75, 74, 74);
    }
    .tab{
      text-align: center;
      border-color: aliceblue;
    }

    table tbody {
      display:block;
      height:500px;
      overflow-y:scroll;
      
    }

    table tbody::-webkit-scrollbar {
        display: none;
    }

    table thead, tbody tr {
      display:table;
      width:100%;
      table-layout:fixed;
    }

    table thead {
      width: calc( 100% )
    }
    
    button{
      border-radius: 10%;
      background-color: white;
    }
    
  </style>
</head>

<body>
  <div id="car" style="margin:0 auto;width: 800px;height: 500px;">
  <table border="1" cellspacing="0" cellpadding="12" class="tab">
    <thead>
      <tr class="header">
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    
    <tbody>
      <tr v-for="(item,index) in BookMessage">
        <td>{{index+1}}</td>
        <td>{{item.bookname}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price}}</td>
        <td>
          <span>
            <button v-on:click="decrease(index)">-</button> {{item.number}} <button v-on:click="increase(index)">+</button>
          </sapn>
        </td>
        <td>
          <button @click="remove(index)">移除</button>
        </td>
      </tr>
    </tbody>

    </table>
    <p v-if="!count">当前购物车为空！</p>
    <p>总价:￥{{SumPrice}}</p>
  </div>
 
</body>
<script>
  const car = new Vue({
    el:'#car',
    data: {
      BookMessage:[
        {
          id:0,
          bookname:"《算法导论》",
          date:"2006-9",
          price:85.00,
          number:1,
        },
        {
          id:1,
          bookname:"《UNIX编程艺术》",
          date:"2006-2",
          price:59.00,
          number:1,
        },
        {
          id:2,
          bookname:"《编程珠玑》",
          date:"2006-10",
          price:39.00,
          number:1,
        },
        {
          id:3,
          bookname:"《代码大全》",
          date:"2008-10",
          price:139.01,
          number:1,
        },
      ],
      
    },

    computed:{
      SumPrice:function(){
        let sum = 0;
        console.log(this.BookMessage.length);
        for(let Book of this.BookMessage){
          sum += Book.price*Book.number;
        }
        return sum;
      },
      count(){
        return this.BookMessage.length;
      }
    },

    methods: {
      decrease(index){
        
        let currentNum = this.BookMessage[index].number-1;
        if(currentNum<0){
          alert("非法操作!");
        }else{
          this.BookMessage[index].number = currentNum;
        }
      },
      increase(index){
        let currentNum = this.BookMessage[index].number+1;
        if(currentNum>99){
          alert("非法操作!");
        }else{
          this.BookMessage[index].number = currentNum;
        }
      },
      remove(index){
          this.BookMessage.splice(index,1);
      },

    },


  })

</script>
</html>

初始化界面：
在这里插入图片描述
点击+号，购买数量变化，总价变化
在这里插入图片描述
点击-号，数量发生变化，当数量为0再继续点击时则会弹出警告！
在这里插入图片描述
点击移除按钮，总价发生变化，直至为空，下方显示“当前购物车为空！”
在这里插入图片描述

在这里插入图片描述

以下是跟着王红元老师写的：
1.创建文件：
在这里插入图片描述

2.引入资源
在这里插入图片描述
3.界面搭建

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body> 
<div id="app">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="(item) in book">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price}}</td>
        <td>
          <button>-</button>
          {{item.count}}
          <button>+</button>
        </td>
        <td>
          <button>移除</button>
        </td>
      </tr>

    </tbody>
  </table>
</div>

<script src="../../vue.js"></script>
<script src="main.js"></script>

</html>

在这里插入图片描述
3.将价格规范化(老师这里提供了methods和filters的写法，因为Vue3已经移除了过滤器，所以我采用了methods方法)
在这里插入图片描述
在这里插入图片描述
4.±按钮和移除

-按钮那个老师用了v-bind:disabled=“item.count <= 1”,是我没有想到的，忘记用绑定事件了。

5.完整代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body> 
<div id="app">
  <div v-if="book.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 book">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{show(item.price)}}</td>
          <!-- <td>{{item.price | showPrice}}</td> -->
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td>
            <button @click="removeHandle(index)">移除</button>
          </td>
        </tr>

      </tbody>
    </table>
    <h2>总价格:{{show(totalPrice)}}</h2>
  </div>
  <h2 v-else>
    购物车为空
  </h2>
  
</div>

<script src="../../vue.js"></script>
<script src="main.js"></script>
<script>
  
</script>
</html>

main.js

const app = new Vue({
  el:'#app',
  data: {
    book:[
      {
        id:1,
        name:"《算法导论》",
        date:"2006-9",
        price:85.00,
        count:1,
      },
      {
        id:2,
        name:"《UNIX编程艺术》",
        date:"2006-2",
        price:59.00,
        count:1,
      },
      {
        id:3,
        name:"《编程珠玑》",
        date:"2006-10",
        price:39.00,
        count:1,
      },
      {
        id:4,
        name:"《代码大全》",
        date:"2008-10",
        price:139.01,
        count:1,
      },
    ],
  },
  computed:{
    totalPrice(){
      let total = 0;
      for(let i = 0;i<this.book.length;i++){
        total += this.book[i].price*this.book[i].count;
      }
      return total;
    }
  },
  methods:{
    show(price){
      return '￥'+price.toFixed(2);
    },
    decrement(index){
      this.book[index].count--;
    },
    increment(index){
      this.book[index].count++;
    },
    removeHandle(index){
      this.book.splice(index,1);
    }
  },
  filters:{
      showPrice(price){
        return '￥'+price.toFixed(2);
      }
    }
})

style.css

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;
}

在这里插入图片描述
在这里插入图片描述

秃头大学生破晓
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE练习题---购物车
MM__GCM666的博客
04-17 659
1.当全部商品被勾选时 全选选择框会自动勾选 2.购买数量可输入 通过长按可实现连续加减1 3.总价和购买数量随着选择自动发生变化 代码如下： <template> <div> <table v-if="list.length"> <thead> <th>全选<i...
VUE购物车案例（组件间传参练习）
m0_66051368的博客
04-30 1526
目录 购物车效果图及组件关系图如下： 1 App.vue 2 Header.vue 3 Goods.vue 4 Counter.vue 5 Footer.vue 6EventBus.js 购物车效果图及组件关系图如下： 其中Counter.vue-->App.vue 是通过EventBus 1 App.vue <template> <div class="a......
Vue组件
北枫林
12-27 329
定义Vue组件 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同： 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一； 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用； 如果要使用组件，直接，把组件的...
【Vue2.0⾯试题】
m0_63902151的博客
04-27 464
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1、vue的生命周期？1.2）⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?2. vuex的理解? (必问) 讲解2.1 怎么开启严格模式3. vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解4. vue路由守卫?(必问) 讲解⻚⾯权限5. v-if与v-show的区别?(90%)6. v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?(90%) 讲解7. methods、compute.
Vue简单练手案例
A_Common_Man的博客
05-05 4389
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue综合小练习-todolist案例
05-29
vue技术todolist小案例，实现代办事项的增删改查。包含了vuex状态管理等技术，功能齐全，适合新手小白使用。推荐下载！！！！！！！！！！！！！！！！！！！！！！！！ 阅读建议：不仅是代码编写实现也更注重内容上...
vue实现购物车小案例
12-13
在这个购物车小案例中，Vue 被用来管理状态并驱动页面交互。下面将详细解释这个案例中的关键知识点： 1. **Vue 实例**： - 在 HTML 中，`<div class="content1" id="content1">` 是 Vue 实例的挂载点，Vue 将在这...
vue第2天-todomvc案例.zip
07-23
7. **路由**（可选）：如果要实现页面间的跳转，可以使用`vue-router`来管理应用的路由，但这对于简单的todomvc案例不是必须的。 在实践中，开发者会逐步熟悉这些概念，通过构建todomvc案例，对Vue.js的基础知识有...
Vue 新指令 v-memo 案例
最新发布
07-12
Vue 新指令 v-memo 案例
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
vue:练习Vue，创建一个简单的应用程序
04-11
介绍 您正在使用的JS 大致 预防措施 常见错误 第一步 如何使用Vue.js 处理Vue.js的实例，需要Vue实例 实例属性 写作范例 var app = new Vue ( { el : '#app' , data : { bpi : null , hasError : false , loading : true } , methods : { hello : function ( ) { } } , mounted : function ( ) { } , filters : { } } ) 埃尔 一个属性，该属性指定Vue.js应用于的标签 数据 定义在Vue.js上处理的变量的属性 方法 定义要在Vue.js上处理的函数的属性*不要忘记添加s！ !! 已安装 挂载在实例的el选项上时执行的属性*将
vue实例练习和vue样式练习
qq_53366282的博客
03-18 1306
目录 vue实例练习和vue样式练习 1.vue实例练习 2.vue样式练习 vue实例练习和vue样式练习 1.vue实例练习 <head> <title>vue实例演示</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <!-- 过滤器的两种写法 -
Vue 案例练习
白菜执笔人的博客
03-26 1316
项目前导 学习笔记 一、图书管理系统（当然是假的，没有与数据库进行交互）         给大家介绍一个 web 页面样式的网站，直接复制它的代码可以更方便的开发。         Bootstrap 官网：https://www.bootcss.com/         该...
vue实现图书购物车案例
Distance的博客
12-16 1684
运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书购物车案例</title> <script src="../js/vuejs-2.5.16.js"></script> &lt...
分享几个Vue案例供大家一起学习
WebView
12-23 4487
1、适合学习Vue的同学们的第二个项目，同样来自慕课网，代码同样进行了详细注释。 完成后可以算是Vue学习的初级水平。 (https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC) 2、用了Vue-router，axios 完成后算是初中级水平 (https://github.com/SD-Gaming/Vue2.0_CNode.bbs) 3、 V...
前端进阶Vue框架练习小案例-----模糊查询
m0_61656944的博客
02-15 140
方法一：函数表达式 <script src="/lib/vue.js"></script> </head> <body> <div id="box"> <input type="text" @input="jianting" v-model="mytext"> <button >搜索</button> <ul>
vue实现一个简单的购物车功能
前端岚枫
08-24 7289
今天做了一个简单的购物车功能，主要用了计算属性，指令等知识点，代码如下： &lt;template&gt; &lt;div&gt; &lt;div id="cart" v-cloak&gt; &lt;template v-if="itemlis.length"&gt; &lt;table&gt; &lt;t
【功能实现】购物车 蓝桥云课楼赛第31期（Web 前端挑战）
Pulse的博客
03-05 651
蓝桥云课楼赛第31期Web 前端进阶第10题
vue3和element-plus案例
08-30
一个常见的Vue3和Element Plus的案例是在Vue3项目中使用Element Plus来构建一个表格展示页面。首先，你需要在Vue3项目中安装Element Plus依赖并引入Element Plus的样式文件。可以按照Element Plus的官方文档中提供的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值