图书购物车

作者: 小圆圈Belen | 来源:发表于2022-02-24 17:25 被阅读0次

图书购物车
Javaweb-案例练习-4-加入购物车的实现过程
React图书购物车案例练习
《当我谈跑步时我谈些什么》
《美与幼童》——绘本的看看看
在线书店的分析
商城之购物车
购物车模块实现
一个美丽的错误，换一个美丽的故事丨人生海海，踏浪前行
SSM框架学习日记（6）——购物车模块

显示图书购物车界面，移除所有书籍之后，显示购物车为空

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/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: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>
</head>

<!--需求描述：图书购物车-->
<body>
<div id= 'vue' >
  <div v-if="books.length>0">
  <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"  :key="item.id">
      <th>{{item.id}}</th>
      <th>{{item.name}}</th>
      <th>{{item.date}}</th>
<!--      <th>{{getFinalPrice(item.price)}}</th>-->
      <th>{{item.price | showPrice}}</th>
      <th>
        <button @click="sub(index)" :disabled="item.count<=1">-</button>
        {{item.count}}
        <button @click="add(index)">+</button>
      </th>
      <th>
        <button @click="remove(index)">移除</button>
      </th>
    </tr>
    </tbody>
  </table>
    <h4>总价：{{totalPrice | showPrice}}</h4>
  </div>
  <h3 v-else>购物车为空</h3>

</div>
<script>
  let vm = new Vue({
    el: '#vue',
    data:{
      books: [
        {
          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: '2008 - 10',
          price: 39.00,
          count: 1,
        },
        {
          id: 4,
          name: '代码大全',
          date: '2006 - 3',
          price: 128.00,
          count: 1,
        }
      ],
      sum: 0
    },
    methods:{
      getFinalPrice(price){
        return '¥  '+ price.toFixed(2)
      },
      add(index){
        this.books[index].count++
      },
      sub(index){
        this.books[index].count--
      },
      remove(index){
        this.books.splice(index,1),
        console.log('移除了第' + index + '个元素')
      }
      },
    computed:{
      totalPrice(){
        let sum = 0
        for(let i=0;i<this.books.length;i++){
          sum += this.books[i].price * this.books[i].count
        }
        return sum
      }
    },
    filters:{
      showPrice(price){
        return '¥  '+ price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>