利用vue创建一个超级简单的购物车案列，新手小白入手vue网站必备技能哦！！

最新推荐文章于 2024-08-12 16:27:11 发布

wdadwa565

最新推荐文章于 2024-08-12 16:27:11 发布

阅读量384

点赞数

文章标签： vue js javascript 前端

本文链接：https://blog.csdn.net/wdadwa565/article/details/109502934

版权

一、首先先是购物车案例的静态布局

 <div id="box">
        <ul>
            <li v-for="(data,index) in datalist">
                <input type="checkbox"> {{data}}
            </li>
        </ul>
        <p>总金额计算:</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                datalist: [{
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: "1",
                }, {
                    name: "商品2",
                    price: 20,
                    number: 2,
                    id: "2",
                }, {
                    name: "商品3",
                    price: 30,
                    number: 3,
                    id: "3",
                }]
            },
        })
    </script>

二、如何实现总计算金额的功能

原理:用双向数据绑定实现功能后的input并且一定要有*value值

** html的代码*
<ul>
            <li v-for="(data,index) in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data"> {{data}}
            </li>
        </ul>
* 
Data 的代码*
data: {
                checkgroup: [],
                datalist: [{
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: "1",
                }, {
                    name: "商品2",
                    price: 20,
                    number: 2,
                    id: "2",
                }, {
                    name: "商品3",
                    price: 30,
                    number: 3,
                    id: "3",
                }]
            },

2.1 在总金额那边插入一个getSum的函数计算总金额

Html的代码
*  <p>总金额计算:{{getSum()}}</p>
Method的代码*
*   methods: {
                getSum() {
                    //函数计算中的状态改变后，函数还是会自动运行一编
                    var sum = 0;
                    for (var i in this.checkgroup) {
                        sum += this.checkgroup[i].number * this.checkgroup[i].price
                    }
                    return sum
                }
            },

三、如何实现全功能功能？

插入change事件当发生改变的时候都会改变

3.1Html的布局

<div id="box" @change="han">
        <input type="checkbox">

3.2data的写法

* data: {
                checkgroup: [],
//默认不选中状态*
                isAllChecked: false,

3.3methods的写法*

 chandleChange() {
                    console.log("改变了" + this.isAllChecked)
                    if (this.isAllChecked) {
                        this.checkgroup = this.datalist
                    } else {
                        this.checkgroup = []
                    }
                },
                //判断有没有都勾选
                handleLichange() {
                    if (this.checkgroup.length === this.datalist.length) {
                        this.isAllChecked = true
                    } else {
                        this.isAllChecked = false
                    }
                }
            }

四、如何实现左减右加的功能*

4.1html的布局

*<ul>
            <li v-for="(data,index) in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data" @change="handleLichange" /> {{data}}
                <button>del</button> {{data.number}}
                <button>add</button>
            </li>
        </ul>

4.2 methods里面的写法

*   handleDelClick(data) {
                    var number = data.number--;
                    if (number === 1) {
                        data.number = 1;
                    }
                }

最后附上购物车的全部源码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/vue.js"></script>
<body>
    <div id="box">
        <input type="checkbox" @change="chandleChange" v-model="isAllChecked" />
        <ul>
            <li v-for="(data,index) in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data" @change="handleLichange" /> {{data}}
                <button @click="handleDelClick(data)">del</button> {{data.number}}
                <button @click="data.number++">add</button>
            </li>
        </ul>
        {{checkgroup}}
        <p>总金额计算:{{getSum()}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                checkgroup: [],
                isAllChecked: false,
                datalist: [{
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: "1",
                }, {
                    name: "商品2",
                    price: 20,
                    number: 2,
                    id: "2",
                }, {
                    name: "商品3",
                    price: 30,
                    number: 3,
                    id: "3",
                }]
            },
            methods: {
                getSum() {
                    //函数计算中的状态改变后，函数还是会自动运行一编
                    var sum = 0;
                    for (var i in this.checkgroup) {
                        sum += this.checkgroup[i].number * this.checkgroup[i].price
                    }
                    return sum
                },
                chandleChange() {
                    console.log("改变了" + this.isAllChecked)
                    if (this.isAllChecked) {
                        this.checkgroup = this.datalist
                    } else {
                        this.checkgroup = []
                    }
                },
                //判断有没有都勾选
                handleLichange() {
                    if (this.checkgroup.length === this.datalist.length) {
                        this.isAllChecked = true
                    } else {
                        this.isAllChecked = false
                    }
                },
                handleDelClick(data) {
                    var number = data.number--;
                    if (number === 1) {
                        data.number = 1;
                    }
                }
            }

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