Vue练习：书籍购物车

最新推荐文章于 2024-07-17 20:44:19 发布

牧歌不会编程

最新推荐文章于 2024-07-17 20:44:19 发布

阅读量86

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_14815089/article/details/134917573

版权

1.效果图

2.案例说明

 1.在界面上以表格的形式，显示一些书籍的数据；

 2.在底部显示书籍的总价格；

 3.点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；

 4.点击移除按钮，可以将书籍移除（当所有的书籍移除完毕时，显示：购物车为空~）；

3.开发过程

制作表单头部：

            <tr>
                <td></td>
                <td>书籍名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>

定义一个Vue实例且挂在到一个div域上：

  <div id="app">

  </div>

  <script>
    // 1.创建app
    const app = Vue.createApp({
      data: function() {
        return {
        }
      },
      methods: {
      }
    }).mount("#app")
  </script>

定义表单数据：

data: function () {
                return {
                    bookList: [
                        {
                            bname: '《算法导论》',
                            publish: '2006-9',
                            price: 85.00,
                            count: 1
                        },
                        {
                            bname: '《UNIX编程艺术》',
                            publish: '2006-2',
                            price: 59.00,
                            count: 1
                        },
                        {
                            bname: '《编程珠玑》',
                            publish: '2008-10',
                            price: 39.00,
                            count: 1
                        },
                        {
                            bname: '《代码大全》',
                            publish: '2006-3',
                            price: 128.00,
                            count: 1
                        },
                    ]
                }
            },

表单数据输入到表单内：且给购买数量减少操作绑定一个函数decrement，购买数量增加操作绑定一个函数increment，书本移除操作绑定一个函数del。

<tr v-for="(book,index) in bookList" :key="index">
                <td>{{index+1}}</td>
                <td>{{book.bname}}</td>
                <td>{{book.publish}}</td>
                <td>￥{{book.price}}</td>
                <td>
                    <button @click="decrement(index)" :disabled="book.count == 1">- 
                    </button>
                    {{book.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td>
                    <button @click="del(index)">移除</button>
                </td>
            </tr>

实现对书本操作减少，增加以及删除函数：

methods: {
                decrement(i) {
                    if (this.bookList[i].count > 1) {
                        this.bookList[i].count--
                    }
                },
                increment(i) {
                    this.bookList[i].count++
                },
                del(i) {
                    this.bookList.splice(i, 1)
                }
            }

计算所有书本总价的属性：

computed: {
                //计算属性
                sum() {
                    let sum = 0;
                    this.bookList.forEach(book => {
                        sum += book.price * book.count
                    });
                    return sum;
                }
            },

总代码：

<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>
    <script type="text/javascript" src="./js/vue.global.js"></script>
</head>

<body>
    <div id="app" style="width:90%;margin:auto;">
        <table border="1px" width="500px">
            <tr>
                <td></td>
                <td>书籍名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(book,index) in bookList" :key="index">
                <td>{{index+1}}</td>
                <td>{{book.bname}}</td>
                <td>{{book.publish}}</td>
                <td>￥{{book.price}}</td>
                <td>
                    <button @click="decrement(index)" :disabled="book.count == 1">-</button>
                    {{book.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td>
                    <button @click="del(index)">移除</button>
                </td>
            </tr>
        </table>
        <h2>总价:￥{{sum}}</h2>
    </div>

    <script>
        // 1.创建app
        const app = Vue.createApp({
            // data: option api
            data: function () {
                return {
                    bookList: [
                        {
                            bname: '《算法导论》',
                            publish: '2006-9',
                            price: 85.00,
                            count: 1
                        },
                        {
                            bname: '《UNIX编程艺术》',
                            publish: '2006-2',
                            price: 59.00,
                            count: 1
                        },
                        {
                            bname: '《编程珠玑》',
                            publish: '2008-10',
                            price: 39.00,
                            count: 1
                        },
                        {
                            bname: '《代码大全》',
                            publish: '2006-3',
                            price: 128.00,
                            count: 1
                        },
                    ]
                }
            },
            computed: {
                //计算属性
                sum() {
                    let sum = 0;
                    this.bookList.forEach(book => {
                        sum += book.price * book.count
                    });
                    return sum;
                }
            },
            methods: {
                decrement(i) {
                    if (this.bookList[i].count > 1) {
                        this.bookList[i].count--
                    }
                },
                increment(i) {
                    this.bookList[i].count++
                },
                del(i) {
                    this.bookList.splice(i, 1)
                }
            }
        })

        // 2.挂载app
        app.mount("#app")
    </script>
</body>

</html>

<html lang="en">

</html>

牧歌不会编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue练习：书籍购物车

表单数据输入到表单内：且给购买数量减少操作绑定一个函数decrement，购买数量增加操作绑定一个函数increment，书本移除操作绑定一个函数del。 4.点击移除按钮，可以将书籍移除（当所有的书籍移除完毕时，显示：购物车为空~）； 3.点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）； 1.在界面上以表格的形式，显示一些书籍的数据； 2.在底部显示书籍的总价格；
复制链接

扫一扫