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

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

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">  
    <script src="./js/vue.js">script>      
    <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>
                            
                            
                            <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>
    
    <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);

        }
    }
});

Vue实现简单的购物车、表单添加_第1张图片

你可能感兴趣的:(Vue,js,web,Vue,js)