一个用vue实现的简单响应式购物车案例

实现结果

在这里插入图片描述

如上,所有书类数据存在数组里,遍历显示在表格中,点击+和-可以实现数量和总价格的响应式变化,其中,减号到1时便添加了disabled类型,无法点击。 价格显示时通过过滤器显示的,加上Z¥符号和两位小数。项目结构为三个文件。

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 v-for="value in item">{{value}}</td>-->
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <!--<td>{{getFinalPrice(item.price)}}</td>   下面是过滤器语法-->
      <td>{{item.price | showPrice}}</td>
      <td>
        <button @click="increment(index)" v-bind:disabled="item.count<=1">-</button>
        {{item.count}}
        <button @click="decrement(index)">+</button>
      </td>
      <td>
        <button @click="removeHandler(index)">移除</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>
<script></script>
</body>
</html>




main.js

const app = new Vue({
  el:"#app",
  data: {
    books: [
      {
        id: 1,
        name: '算法导论',
        date: '2019-01-10',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '计算机导论',
        date: '2019-02-14',
        price: 90.00,
        count: 2
      },
      {
        id: 3,
        name: '科学导论',
        date: '2019-09-10',
        price: 85.21,
        count: 1
      },
      {
        id: 4,
        name: '网络导论',
        date: '2019-08-21',
        price: 19.02,
        count: 1
      },
    ]
  },
  methods:{
    getFinalPrice(price) {
      return '$' + price.toFixed(2)
    },
    increment(index){
      /*if(this.books[index].count <= 1) return*/
      this.books[index].count--
    },
    decrement(index){
      this.books[index].count++
    },
    removeHandler(index){
      this.books.splice(index,1)
    }
  },
  filters:{
    showPrice(price){
      return '$' + price.toFixed(2)
    }
  },
  computed:{
    totalprice(){
      let tprice = 0
      for(let i = 0; i< this.books.length; i++)
      {
        tprice += this.books[i].price * this.books[i].count
      }
      return tprice
    }
  }
})

style.css

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  bordre-spacing: 0;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th{
  backgroud-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
原文链接:加载失败,请重新获取