vue 购物车案例

最新推荐文章于 2024-04-26 16:47:03 发布

MDR_0820

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量271

点赞数

分类专栏： ES6 JavaScript 文章标签： vue.js 前端 css3

本文链接：https://blog.csdn.net/MDR_0820/article/details/121308418

版权

JavaScript 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

ES6

9 篇文章 0 订阅

订阅专栏

html

<body>
    <div id="app">
        <div v-if="books.length">


            <table>
                <tr>
                    <th> 序列 </th>
                    <th> 名称 </th>
                    <th> 日期 </th>
                    <th> 价格 </th>
                    <th> 数量 </th>
                    <th> 操作 </th>
                </tr>

                <tbody>
                    <tr v-for="(item ,index) in books">
                        <td> {{item.id}} </td>
                        <td> {{item.name}} </td>
                        <td> {{item.date}} </td>
                        <!-- <td> {{ getFinaPrice(item.price)}} </td> -->
                        <td> {{ item.price | showPrice}} </td>

                        <td>
                            <button @click="decrement(index)" v-bind:disabled="item.count <= 0">-</button>

                            {{item.count}}

                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeClick (index)">移除</button>
                        </td>
                    </tr>
                </tbody>

            </table>
            <h3 class="sum">总价格 {{ totalPrice | showPrice}} </h3>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script src="index.js"></script>

</body>

CSS

style>
        table {
            margin: 100px auto;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-style: 0;
        }

        th,
        td {
            padding: 8px 16px;
            border: 1px solid #ccc;
            text-align: left;
        }

        th {
            background-color: pink;
            color: blue;
            font-weight: 700;
        }

        .sum {
            margin-top: -90px;
            margin-left: 670px;
        }
    </style>

vue js

const app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                id: 1,
                name: '算法导论',
                date: '2006-9',
                price: 85.00,
                count: 1
            }, {
                id: 2,
                name: 'UNIX编程艺术',
                date: '2006-2',
                price: 59.99,
                count: 1
            }, {
                id: 3,
                name: '编程珠玑',
                date: '2008-10',
                price: 39.00,
                count: 1
            }, {
                id: 4,
                name: '代码大全',
                date: '2006-3',
                price: 128.88,
                count: 1
            }, {
                id: 5,
                name: '斗破苍穹',
                date: '2006-1',
                price: 111.11,
                count: 1
            }
        ],

    },
    methods: {    //调用方法
        //     getFinaPrice(price) {
        //         return '￥' + price.toFixed(2)
        //     },
        decrement(index) {
            this.books[index].count--
        },
        add(index) {
            this.books[index].count++
        },
        removeClick(index) {
            this.books.splice(index, 1)
        }

    },
    computed: {
        totalPrice() {
            let totalPrice = 0
            for (let i = 0; i < this.books.length; i++) {
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice
        }
    },
    filters: {   // 过滤器
        showPrice(price) {
            return '￥' + price.toFixed(2)


        }
    }
})