十日谈 : 基于Vue的购物车案例

最新推荐文章于 2022-03-15 15:35:42 发布

扔猿太膻

最新推荐文章于 2022-03-15 15:35:42 发布

阅读量360

点赞数

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

本文链接：https://blog.csdn.net/qq_36013952/article/details/104489140

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 : 基于Vue的购物车案例

欢迎阅读我的Vue学习日记

欢迎阅读我的Vue学习日记

基于Vue的购物车案例

建立文件:
在这里插入图片描述
写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;
}

在main.js中写入数组:

const app = new Vue({
  el:'#app',
  data:{
   books:[
      {
        id:1,
        name:'算法导论',
        date:'2006-5',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'编程艺术',
        date:'2006-2',
        price:35.00,
        count:1
      },
      {
        id:3,
        name:'编程珠玑',
        date:'2006-6',
        price:25.00,
        count:1
      },
      {
        id:4,
        name:'代码大全',
        date:'2006-12',
        price:55.00,
        count:1
      }
    ]
  },
})

搭建界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<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 books">
      <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="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

界面效果:
在这里插入图片描述

过滤器的使用

过滤器在vue中是用filters定义的
调用语句如下:

{{item.price | showPrice}}

通过 ‘|’ 符号调用
本案例想显示’‘¥’'符号和两位小数点,过滤器定义如下:

  filters:{
    showPrice(price){
      return '¥' + price.toFixed(2)
    }
  }

html中修改为:

<td>{{item.price | showPrice}}</td>

改变购买数量

增加methods:

    increament(index){
      this.books[index].count++
    },
    decreament(index){
      this.books[index].count--
    }

控制增加和减少

监听点击按钮:

        <button @click="decreament(index)">-</button>
        {{item.count}}
        <button @click="increament(index)">+</button>

需要注意,不同的书的数目是分开计算的,所以在遍历的时候加入index

<tr v-for="(item,index) in books">

注意,购物车的物品个数不能小于1
改进方案:

<button @click="decreament(index)" :disabled="item.count <= 1">-</button>

绑定disabled方法,使button不能按下

移除按钮和总价计算

移除按钮

增加methods:

    removeHandle(index){
      this.books.splice(index,1)
    }

splice方法请看前文

监听按钮:

<td><button @click="removeHandle">移除</button></td>

当移除空时显示购物车为空:
添加v-if语句判断购物车是否为空

<div v-if="books.length">

<h2 v-else>购物车为空</h2>

总价计算

使用计算属性

  computed:{
    totalPrice(){
      let totalPrice = 0
      for(let i = 0;i < this.books.length;i++)
      {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice
    }
  },

写入html:

<h2>总价格{{totalPrice | showPrice}}</h2>

完整版index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <div v-if="books.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 books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price | showPrice}}</td>
        <td>
          <button @click="decreament(index)" :disabled="item.count <= 1">-</button>
          {{item.count}}
          <button @click="increament(index)">+</button>
        </td>
        <td><button @click="removeHandle">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h2>总价格{{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

完整的main.js

const app = new Vue({
  el:'#app',
  data:{
   books:[
      {
        id:1,
        name:'算法导论',
        date:'2006-5',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'编程艺术',
        date:'2006-2',
        price:35.00,
        count:1
      },
      {
        id:3,
        name:'编程珠玑',
        date:'2006-6',
        price:25.00,
        count:1
      },
      {
        id:4,
        name:'代码大全',
        date:'2006-12',
        price:55.00,
        count:1
      }
    ]
  },
  methods:{
    increament(index){
      this.books[index].count++
    },
    decreament(index){
      this.books[index].count--
    },
    removeHandle(index){
      this.books.splice(index,1)
    }
  },
  filters:{
    showPrice(price){
      return '¥' + price.toFixed(2)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0
      for(let i = 0;i < this.books.length;i++)
      {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice
    }
  },
})