vue 购物车

最新推荐文章于 2024-07-23 21:45:00 发布

冰镇奶茶

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量551

点赞数 1

分类专栏：笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_57002951/article/details/123657070

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        编号：<input type="text" v-model="no"> 名称：
        <input type="text" v-model="na"> 价格：
        <input type="text" v-model="pr"> 数量：
        <input type="text" v-model="num">
        <button @click="addCart">添加到购物车</button>

        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>小计</th>
            </tr>
            <tr v-for="(item,index) in lists" :key="index">
                <th>{{lists[index].id}}</th>
                <th>{{lists[index].name}}</th>
                <th>{{lists[index].price}}</th>
                <th><input type="button" value="+" @click="add(index)">{{lists[index].number}}<input type="button" value="-" @click="reduce(index)"></th>
                <th>{{(lists[index].price*lists[index].number).toFixed(2)}}</th>
                <!-- 保留两位小数 -->
            </tr>
        </table>
        <h1>总价格 ：{{ totalPrice().toFixed(2) }}</h1>
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "购物车案例",
            lists: [{
                id: 1,
                name: "iphone8",
                price: 19.9,
                number: 1
            }, {
                id: 2,
                name: "meta40 pro",
                price: 15,
                number: 1
            }, ],
            sum: 0,
            items: {},
            no: '',
            na: '',
            pr: '',
            num: ''
        },
        methods: {
            add(index) {
                this.lists[index].number++;

            },
            reduce(index) {
                if (this.lists[index].number > 0) {
                    this.lists[index].number--;

                } else {
                    this.lists[index].number == 0;
                }
            },
            totalPrice() {
                //计算总价格
                var totalPrice = 0;
                for (var i = 0; i < this.lists.length; i++) {
                    var price = this.lists[i].number * this.lists[i].price;
                    totalPrice += price;
                }
                return totalPrice;
            },
            addCart() {
                this.items = {
                    id: this.no,
                    name: this.na,
                    price: this.pr,
                    number: this.num
                }
                this.lists.push(this.items)
            }
        }
    })
</script>

冰镇奶茶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购.
复制链接

扫一扫