vue_购物车案例

写在博客前的话：

  • 保留两位小数使用的是 .toFixed(2) 方法
  • 动态绑定v-bind:disabled='item.count <=1 '来判断按钮是否可点击
  • 按钮的动态使用index去判定

思路：

  • 表格的建立，表头，循环遍历js中的数组

  • 实现过滤器添加￥与实现小数点后两位

  • 实现加减按钮的点击，动态绑定实现按钮小于2之后不可点击

  • 实现删除操作，使用split(index,1)方法

  • 实现总价的计算，使用computed属性

预览：

代码演示：

html 框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</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>
<!--保留两位小数使用的是 .toFixed(2)方法-->
      <td>{{item.price | showPrice}}</td>
      <td>
<!--        动态绑定v-bind:disabled='item.count <=1 '来判断按钮是否可点击-->
        <button @click="btnSubClick(index)" :disabled="item.count <= 1">-</button>
        {{item.count}}
        <button @click="btnAddClick(index)">+</button>
      </td>
      <td><button @click="removeHandle">移除</button></td>
    </tr>
    </tbody>
  </table>
  <h2>总价格为：{{totalPrice | showPrice}}</h2>
  </div>
  <div v-else>购物车为空</div>
</div>
<script src="../js/vue.js"></script>

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

css 样式

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    /*margin: 0 auto; // 表格居中*/
}

th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    /*text-align: left;*/
    text-align: center;
}
th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

js 代码

const app = new Vue({
  el: '#app',
  data:{
    books:[
      {
        id:1,
        name: '《哈利波特I》',
        date:'2006-06',
        price:85.00,
        count:1
      },
      {
        id:2,
        name: '《哈利波特II》',
        date:'2007-08',
        price:59.00,
        count:1
      },
      {
        id:3,
        name: '《哈利波特III》',
        date:'2008-09',
        price:36.00,
        count:1
      },
      {
        id:4,
        name: '《哈利波特IV》',
        date:'2009-10',
        price:69.00,
        count:1
      },
      {
        id:5,
        name: '《哈利波特V》',
        date:'2010-12',
        price:51.00,
        count:1
      }
    ]
  },
  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
    }
  },
  methods:{
    // getFinalPrice(price){
    //   return '￥' + price.toFixed(2)
    // }
    btnAddClick(index){
      this.books[index].count++;
      // console.log(index);
    },
    btnSubClick(index){
      // if (this.books[index].count > 0){
      this.books[index].count--;
      // console.log(index);
      // }

    },
    removeHandle(index){
      this.books.splice(index,1)
    }
  },
  filters:{
    showPrice(price){
      return '￥' + price.toFixed(2)
    }

  }
})
posted @ 2021-10-13 10:58  博客zhu虎康  阅读(106)  评论(0)  编辑  收藏  举报