您的位置:首页 > 编程学习 > > 正文

vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)

更多 时间:2021-10-02 01:03:09 类别:编程学习 浏览量:1105

vue开发的购物车0.1加0.2

vue实现可改变购物数量的购物车

本文实例为大家分享了vue实现改变购物数量的购物车,供大家参考,具体内容如下

效果图:

vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)

知识点:

1.computed 计算属性
2.filters 过滤器

实现代码:

  • <!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>Document</title>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #ccc;
        }
        
        td,
        th {
            padding: 8px 16px;
            border: 1px solid #ccc;
            text-align: left;
        }
        
        th {
            background-color: #f7f7f7;
            color: #5c6b77;
        }
    </style>
    
    <body>
        <li id="box">
            <li v-if="books.length">
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>书籍名字</th>
                            <th>出版日期</th>
                            <th>价格</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in books">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.date}}</td>
                            <td>{{item.price | toprice}}</td>
                            <td>
                                <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
                                <button @click='add(index)'>+</button>
                            </td>
                            <td>
                                <button @click="remove(index)">移除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h2>总价:{{getallprice | toprice}}</h2>
            </li>
            <h2 v-else>您没有购物信息</h2>
        </li>
        <script>
            const vm = new Vue({
                el: "#box",
                data: {
                    books: [{
                        id: 1,
                        name: "《vue.js实战》",
                        date: "2010.2.4",
                        price: 82.00,
                        aunt: 1
                    }, {
                        id: 2,
                        name: "《javascript实战》",
                        date: "2010.2.4",
                        price: 108.00,
                        aunt: 1
                    }, {
                        id: 3,
                        name: "《html+css实战》",
                        date: "2010.2.4",
                        price: 42.50,
                        aunt: 1
                    }, {
                        id: 4,
                        name: "《axios实战》",
                        date: "2010.2.4",
                        price: 82.00,
                        aunt: 1
                    }, {
                        id: 5,
                        name: "《jquery实战》",
                        date: "2010.2.4",
                        price: 65.20,
                        aunt: 1
                    }, ]
                },
                methods: {
                    add(index) {
                        this.books[index].aunt++;
                    },
                    down(index) {
                        this.books[index].aunt--;
                    },
                    remove(index) {
                        this.books.splice(index, 1)
                    },
    
                },
                computed: {
                    getallprice() {
                        let all = 0;
                        for (let i = 0; i < this.books.length; i++) {
                            all += this.books[i].price * this.books[i].aunt
                        }
                        return all
                    }
                },
                filters: {
                    toprice(price) {
                        return '¥' + price.toFixed(2)
                    },
    
                }
            })
        </script>
    </body>
    
    </html>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 购物车
    您可能感兴趣