05_购物车案例

实现的大致效果如下图:
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div id="container">
        <table class="table table-striped table-hover" align="center" id="box">
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for='i in id' v-if='isShow[i]'>
                <td>{{i+1}}</td>
                <td>{{books[i]}}</td>
                <td>{{date[i]}}</td>
                <td>{{price[i]}}</td>
                <td>
                    <button style="width: 30px;height:30px;" @click='UnAdd(i)'
                        v-bind:disabled='counter[i]<=1'>-</button>
                    <p style="display:inline-block">{{counter[i]}}</p>
                    <button style="width: 30px;height:30px;" @click='Add(i)'>+</button>
                </td>
                <td>
                    <button @click='remove(i)'>移除</button>
                </td>
            </tr>
        </table>
        <p>总价:¥ {{total}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                id: [0, 1, 2, 3],
                counter: [1, 1, 1, 1],
                price: [85.00, 59.00, 39.00, 128.00],
                books: ['《《算法导论》》', '《《UNIX编程艺术》》', '《《编程珠玑》》', '《《代码大全》》'],
                date: ['2006-9', '2006-2', '2008-10', '2006-3'],
                isShow: ['true', 'true', 'true', 'true']
            },
            computed: {
                total() {
                    let finalPrice = 0;
                    for (let i = 0; i <= 3; i++) {
                        finalPrice = finalPrice + this.counter[i] * this.price[i];
                    }
                    return finalPrice;
                }
            },
            methods: {
                Add(i) {
                    ++this.counter[i];
                    this.counter.splice(i, 1, this.counter[i]++);
                },
                UnAdd(i) {
                    --this.counter[i];
                    this.counter.splice(i, 1, this.counter[i]--);
                },
                remove(i) {
                    this.isShow[i] = !this.isShow[i];
                    this.isShow.splice(i, 1, this.isShow[i]);

                }
            }
        })
    </script>
</body>

</html>

本次案例由于是我自己写的,没有按照老师的写法,所以出现了一些问题,不过收获还是有的,这里记录一下。 没有实现的功能:总价在进行移除操作后,是没办法减去移除元素价格的。 在看了老师的写法后,才发现是数据结构的问题,老师的数据是在一个大的数组中放了 4 个对象,每个对象存入书的名称,价格等等,这样一来在获取数据方面就方便得多了,而我把它放在数组中,所以没有实现的功能基本上是无解的,这才意识到数据结构的重要性。另外还有几个补充知识点:

  1. 过滤器,在上面的案例中,价格前面有一个$符号,我采用的是拼接的方式,但是这样的方式对纯数据来说不太友好,所以引入过滤器,filters,本质上还是几个函数;
  2. 对数据的处理的一个方法 toFixed(numer) number 表示要添加几个小数零;
  3. 为按钮绑定 disabled 后,按钮不能进行点击,见上面的代码即可。

在做这个案例的时候,一开始没有注意前面那个数组中的非响应式的方法,耽误了比较多的时间,后来才发现转为 splice 方法,下次要注意一下。

Last Updated:
Contributors: hqchqc