Vue简易购物车实现原理（没有使用Vue脚手架）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css代码部分 */
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 50px auto;
        }

        tr,
        td {
            width: 50px;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .btn {
            width: 30px;
            height: 30px;
            background-color: yellow;
            outline: none;
            border: 0;
        }

        .btn2 {
            width: 50px;
            height: 30px;
            outline: none;
            border: 0;
            background-color: yellow;
        }

        p {
            text-align: center;
        }

        span {
            color: red;
        }

        .sx {
            width: 50px;
            height: 30px;
            outline: none;
            position: absolute;
            left: 34%;
            top: 10px;
            outline: none;
            border: 0;
        }

        input {
            height: 30px;
            outline: none;
            position: absolute;
            left: 40%;
            top: 10px;
            width: 300px;
        }
    </style>
</head>

<body>
    <!-- html代码部分 -->
    <div id="div">
        <button class="sx" @click="sort()">
            <span v-show="flag">升序</span>
            <span v-show="!flag">降序</span>
        </button>
        <input type="text" v-model="keywords">
        <table border="1px solid red" cellspacing="0">

            <tr>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(v,i) in search(keywords)" :key="key">
                <td>{{v.name}}</td>
                <td>{{v.price}}</td>
                <td>
                    <button class="btn" @click="add(i)">+</button>
                    <span> {{v.num}} </span>
                    <button class="btn" @click="app(i)">-</button>
                </td>
                <td><button class="btn2" @click="del(i)">删除</button></td>
            </tr>

        </table>
        <p>总价格:&emsp;<span>{{zongjia()}}</span></p>

    </div>

</body>
<!-- 引入vue -->
<script src="./js/vue.js"></script> 

</html>
<script>
// js代码部分
    var vm = new Vue({
        el: "#div",
        data: {
            goods: [
                { id: 1, name: "苹果", price: 10, num: 1 },
                { id: 1, name: "芒果", price: 15, num: 1 },
                { id: 1, name: "西红柿", price: 20, num: 1 }
            ],
            flag: true,
            keywords: ""
        },
        methods: {
            // 方法|总价格计算
            zongjia() {
                var sum = 0
                this.goods.forEach((v, i) => {
                    sum += v.price * v.num
                })
                return sum
            },
            // 删除
            del(i) {
                this.goods.splice(i, 1)
            },
            // 数量添加
            // +
            add(i) {
                var goods = this.goods
                var num = goods[i].num
                num = num + 1
                goods[i].num = num
            },
            //-
            app(i) {
                var goods = this.goods
                var num = goods[i].num
                if (num > 1) {
                    num = num - 1
                    goods[i].num = num
                }
            },
            // 排序
            sort() {
                if (this.flag) {
                    //升序
                    this.goods.sort((a, b) => {
                        return a.price - b.price
                    })
                } else {
                    // 降序
                    this.goods.sort((b, a) => {
                        return b.price - a.price
                    })
                }
                this.flag = !this.flag
            },
            // 搜索
            search(keywords) {
                var newGoods = []
                this.goods.forEach((v) => {
                    if (v.name.indexOf(keywords) != -1){
                        newGoods.push(v)
                    }
                })
                return newGoods
            }
        }
    })
</script>
最后编辑于：2020.05.08 14:24:58
禁止转载，如需转载请通过简信或评论联系作者。