Vue实现简单的购物车、表单添加

最新推荐文章于 2022-10-26 15:38:14 发布

枫思然

最新推荐文章于 2022-10-26 15:38:14 发布

阅读量706

点赞数

分类专栏： Vue js web 文章标签： Vue js

本文链接：https://blog.csdn.net/qq_38318589/article/details/102569578

版权

js 同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

web

6 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

Vue实现简单的购物车、表单添加

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/bootstrap.css">  <!-- 引入bootstrap文件-->
    <script src="./js/vue.js"></script>      <!--引入Vue文件-->
    <style>
        * {
            font-size: 18px;
        }
        tr,td,th{
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="container"  id="app">
        <h1 class="text-center">购物车</h1>
        <hr>
        <div class="content">
            <div class="row">
                <table class="table table-striped table-condensed table-hover table-responsive text-center">
                    <tr class="text-center" style="border-bottom: 1px solid #ccc">
                        <th class="text-center">序号</th>
                        <th class="text-center">书名</th>
                        <th class="text-center">作者</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">单价</th>
                        <th class="text-center">小计</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <template v-for="(item,index) of books">
                        <tr class="warning" style="border-bottom: 1px solid #ccc">
                            <td> {{item.ind}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.wirter}}</td>
                            <td><button class="btn btn-primary btn-sm"
                                        @click="cutnum(index)"> - </button>
                                {{item.num}}
                                <button class="btn btn-primary btn-sm"
                                        @click=" addnum(index)">+</button>
                            </td>
                            <td>{{item.pice}}</td>
                            <td>{{item.pice*item.num}}</td>
                            <!--添加删除事件-->
                            <!--利用index判断是否为2的倍数，然后替换类名，实现隔行换色-->
                            <td> <button @click="removebooks(index)"
                                         :class="{'btn-info':index%2==0,'btn-primary':index%2!=0}" >删除
                                </button>
                            </td>
                        </tr>
                    </template>
                </table>
                <div class="pull-right">
                    总价：￥{{Sum}}
                </div>
            </div>
        </div>

        <h2 class="text-center">添加书籍</h2>
        书名：<br>
        <input type="text" class="form-control" placeholder="请输入书名" v-model="name"><br>
        作者：<br>
        <input type="text" class="form-control" placeholder="请输入作者" v-model="wirter"><br>
        数量：<br>
        <input type="text" class="form-control" placeholder="请输入数量" v-model="num"><br>
        价格：<br>
        <input type="text" class="form-control" placeholder="请输入价格" v-model="pice">
        <br>
        <button class="form-control btn-primary" @click="addbook">添加</button>
        <br><br>
    </div>
    <!--引入js文件-->
    <script src="./js/car.js"></script>
</body>

</html>

Js代码

new Vue({
    el: '#app',
    data: {
        ind: 2,
        name: '',
        wirter: '',
        num: '',
        pice: '',
        books: [
            { ind: 1, name: '亲热天国', wirter: '自来也', num: 1, pice: 9 },
            { ind: 2, name: '汉语词典', wirter: '新华社', num: 1, pice: 99 }
        ],
    },
    methods: {
        //添加书籍
        addbook() {
            if (this.name !== '' && this.age !== '') {
                if (Number.isNaN(Number(this.num))) {
                    alert('书籍数量与单价必须为数字');
                } else {
                    this.books.push({
                        ind: this.ind + 1,
                        name: this.name,
                        wirter: this.wirter,
                        num: this.num,
                        pice: this.pice,

                    })
                }
            } else {
                alert("书籍信息每一项均不能为空！")
            }
        },
        //书籍数量加减
        addnum(index){
            this.books[index].num += 1;
        },
        cutnum(index){
            if(this.books[index].num>0){
                this.books[index].num -= 1;
            }
        },
        //删除书籍
        removebooks(index){
            this.books.splice(index,index+1);
        }
    },
    computed: {
        // 计算总价
        Sum: function () {
            let arr1=[0];
            //循环将每本书的小计（单价*数量），并添加到数组arr1；
            for(let i =0; i<this.books.length; i++){
                arr1.push(this.books[i].pice*this.books[i].num);
            }
            function getSum(total, num) {
                return total + num;
            }
            //用reduce()方法计算数组内元素的总和
            return arr1.reduce(getSum);

        }
    }
});