08-购物车案例

最新推荐文章于 2023-07-21 20:27:24 发布

小影

最新推荐文章于 2023-07-21 20:27:24 发布

阅读量137

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/112708949

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

对前面知识总结归纳，做个综合性的案例
注意保留后两位小数，前面的￥符号
在这里插入图片描述
html：

<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="decrement(index)"
                  v-bind:disabled="item.count <= 0"
                >
                  -
                </button>
                {{item.count}}
                <button @click="increment(index)">+</button>
              </td>
              <td><button @click="removeBook(index)">移除</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>

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

const app = new Vue({
  el: "#app",
  data: {
    books: [
      {
        id: 1,
        name: "《算法导论》",
        date: "2006-9",
        price: 85.0,
        count: 1,
      },
      {
        id: 2,
        name: "《UNIX编程艺术》",
        date: "2006-2",
        price: 59.0,
        count: 1,
      },
      {
        id: 3,
        name: "《编程珠玑》",
        date: "2008-10",
        price: 39.0,
        count: 1,
      },
      {
        id: 4,
        name: "《代码大全》",
        date: "2006-3",
        price: 128.0,
        count: 1,
      },
    ],
  },
  methods: {
    increment(index) {
      this.books[index].count++;
    },
    decrement(index) {
      this.books[index].count--;
    },
    removeBook(index) {
      this.books.splice(index, 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;
    },
  },
  filters: {
    showPrice(price) {
      return "￥" + price.toFixed(2);
    },
  },
});