Vuejs图书购物车案例

最新推荐文章于 2022-06-07 22:10:36 发布

葱不爱姜

最新推荐文章于 2022-06-07 22:10:36 发布

阅读量386

点赞数 1

分类专栏： VueJs 文章标签： vue

本文链接：https://blog.csdn.net/linzhangmeidi/article/details/106535448

版权

VueJs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如有问题，欢迎各位大佬批评指正
图书购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书购物车</title>
</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>
                  <button @click="increase(index)" :disabled="item.num >= 10">+</button>
                  {{item.num}}
                  <button @click="decrease(index)" :disabled="item.num <= 1">-</button>
              </td>
              <td>{{item.price | getPrice}}</td>
              <td><button @click="removes(index)">移除</button></td>
          </tr>
          </tbody>
      </table>
      总价格：{{total | getPrice}}
  </div>
    <div v-else>
        <h3>购物车为空</h3>
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {
                    id: 1,
                    name: '《三国演义》',
                    date: '2020.6.3',
                    num: 1,
                    price: 188
                },
                {
                    id: 2,
                    name: '《水浒传》',
                    date: '2020.6.3',
                    num: 1,
                    price: 188
                },
                {
                    id: 1,
                    name: '《西游记》',
                    date: '2020.6.3',
                    num: 1,
                    price: 188
                },  {
                    id: 1,
                    name: '《红楼梦》',
                    date: '2020.6.3',
                    num: 1,
                    price: 188
                }

            ],
        },
        methods: {
            increase(index) {
                this.books[index].num ++
            },
            decrease (index) {
                this.books[index].num --
            },
            removes(index) {
                this.books.splice(index,1);
            },
            //可以使用方法实现总价格计算，但是推荐使用计算属性来进行总价格的计算
            // getTotalPrice() {
            //     let totalPrice = 0;
            //     for (i in this.books) {
            //         totalPrice += this.books[i].price * this.books[i].num;
            //     }
            //     return totalPrice;
            // }
        },
        computed: {
            total() {
                let totalPrice = 0;
                for(i in this.books) {
                    totalPrice += this.books[i].price * this.books[i].num;
                }
                return totalPrice;
            }
        },
        //使用过滤器，返回指定格式数据
        filters: {
            getPrice(price) {
                return "￥" + price.toFixed(2);
            }
        },
    })
</script>
</body>
</html>

葱不爱姜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vuejs图书购物车案例

如有问题，欢迎各位大佬批评指正图书购物车<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图书购物车</title></head><body><div id="app"> <div v-if="books.length"> <table>
复制链接

扫一扫

专栏目录