使用vue3技术实现简单的书籍购物车功能

佳学

已于 2023-10-30 20:11:28 修改

阅读量1.4k

点赞数 9

分类专栏： vue3 文章标签： vue.js javascript 前端 html css3

于 2023-04-16 17:17:09 首次发布

本文链接：https://blog.csdn.net/create_bools/article/details/130184424

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文章演示了如何通过Vue.js实现一个简单的购物车应用，包括通过CDN引入Vue库，使用v-model进行双向数据绑定，v-for指令遍历数据，添加、删除商品，计算总价以及购物车清空等功能。

摘要由CSDN通过智能技术生成

1、通过CDN方法引入vue插件

<!-- 引入vue插件 -->
    <!-- CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2、在挂载的div中加入添加输入框，并使用v-model指令实现双向数据绑定

<input class="inpStyle" v-model="inpName" type="text" placeholder="请输入书籍名称">&nbsp;
<input class="inpStyle" v-model="inpDate" type="text" placeholder="请输入出版日期">&nbsp;
<input class="inpStyle" v-model="inpMoney" type="text" placeholder="请输入价格">&nbsp;
<button @click="add" class="addStyle">添加</button>

并在data函数中接收输入框输入的内容

data(){
     return{
         inpName:'',
         inpDate:'',
         inpMoney:'',

      }
},

3、使用v-for指令实现数据遍历

<tr v-for="(item,index) in list">
      <td class="numBox">{{index+1}}</td>
      <td class="bookBox">{{item.bookName}}</td>
      <td class="dateBox">{{item.pubDate}}</td>
      <td class="priceBox">¥{{item.price}}</td>
      <td>
          <button :class="item.num == 1? 'is-disabled':''" @click="subNumber(index)">- 
          </button>
          {{item.num}}
          <button @click="addNumber(index)">+</button>

      </td>
      <td>
          <button @click="del(index)">移除</button>
      </td>
</tr>

为了实现购物车物品序号的动态绑定，将购物车序号以index下标+1的方式，用插值表达式进行输出。代码如下：

<td class="numBox">{{index+1}}</td>

5、在methods方法中定义添加方法add()

add(){
               // 判断输入框是否为空
                    if(this.inpName == '' || this.inpDate == '' || this.inpMoney == ''){
                        return
                    }
                    let obj = {
                        bookName:this.inpName,
                        pubDate:this.inpDate,
                        price:this.inpMoney,
                        num:1
                    }
                    this.list.push(obj)
                  //输入框清空操作
                    this.inpName = ''
                    this.inpDate = ''
                    this.inpMoney = ''
                },

6、总价计算

allmoney(){
                    let num = 0;
                    for (var i in this.list){
                        num +=this.list[i].price*1*this.list[i].num;
                    }
                    return num
                },

7、购物车清空后显示的内容

emptyBox(){
                    if(this.list.length == 0){
                        return "购物车为空~"
                    }
                }

通过插值表达式接收方法返回值

<h3>总价：{{allmoney()}}</h3>

8、移除列表按钮设置

<button @click="del(index)">移除</button>

del(index){
                    this.list.splice(index,1);
                },

9、购买数量选择按钮设置：

使用v-bind指令动态绑定button的class类名

<button :class="item.num == 1? 'is-disabled':''" @click="subNumber(index)">-</button>
{{item.num}}
<button @click="addNumber(index)">+</button>

对减少按钮设置最小值，当num达到最小值，将button按钮禁用

subNumber(index){
                    if(this.list[index].num == 1){
                        return
                    }else{
                        this.list[index].num -= 1
                    }
                },

10、完整代码如下：

<!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>书籍购物车</title>
    <style>
        table {
            text-align: center;
            border-color: #EAEAEA;
        }
        thead {
            background-color: #F7F7F7;
            height: 60px;
            color: #596D79;
        }
        tbody>tr {
            height: 60px;
            background-color: rgba(33,229,209,.6);
        }
        .addStyle {
            width: 60px;
            height: 30px;
            color: white;
            margin-left: 20px;
            background-color: rgb(255, 0, 0);
            border: none;
            border-radius: 15%;
        }
        .addStyle:hover {
            background-color: rgba(255, 0, 0, .5);
        }
        .inpStyle {
            width: 200px;
            height: 30px;
            border: none;
            background-color: rgba(0, 0, 0, 0.3);
        }
        ::placeholder {
            color: white;
        }
        .is-disabled {
            cursor: not-allowed;
        }
        .emptyBox {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input class="inpStyle" v-model="inpName" type="text" placeholder="请输入书籍名称">&nbsp;
        <input class="inpStyle" v-model="inpDate" type="text" placeholder="请输入出版日期">&nbsp;
        <input class="inpStyle" v-model="inpMoney" type="text" placeholder="请输入价格">&nbsp;
        <button @click="add" class="addStyle">添加</button>
        <table cellpadding=20 border="2">
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td class="numBox">{{index+1}}</td>
                    <td class="bookBox">{{item.bookName}}</td>
                    <td class="dateBox">{{item.pubDate}}</td>
                    <td class="priceBox">¥{{item.price}}</td>
                    <td>
                        <button :class="item.num == 1? 'is-disabled':''" @click="subNumber(index)">-</button>
                        {{item.num}}
                        <button @click="addNumber(index)">+</button>

                    </td>
                    <td>
                        <button @click="del(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h2>{{emptyBox()}}</h2>
        <h3>总价：{{allmoney()}}</h3>
    </div>

    <!-- 引入vue插件 -->
    <!-- CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        
        const app = Vue.createApp({
            data(){
                return{
                    inpName:'',
                    inpDate:'',
                    inpMoney:'',
                    list: [
                        {
                            bookName:"《算法导论》",
                            pubDate:"2006-9",
                            price: "85",
                            num:1
                        },
                        {
                            bookName:"《UNIX编程艺术》",
                            pubDate:"2006-2",
                            price: "59",
                            num:1
                        },
                        {
                            bookName:"《编程珠玑》",
                            pubDate:"2008-10",
                            price: "39",
                            num:1
                        },
                        {
                            bookName:"《代码大全》",
                            pubDate:"2006-3",
                            price: "128",
                            num:1
                        },
                    ]
                }
            },
            methods: {
                add(){
                    if(this.inpName == '' || this.inpDate == '' || this.inpMoney == ''){
                        return
                    }
                    let obj = {
                        bookName:this.inpName,
                        pubDate:this.inpDate,
                        price:this.inpMoney,
                        num:1
                    }
                    this.list.push(obj)
                    this.inpName = ''
                    this.inpDate = ''
                    this.inpMoney = ''
                },
                //删除当前项
                del(index){
                    this.list.splice(index,1);
                },
                subNumber(index){
                    if(this.list[index].num == 1){
                        return
                    }else{
                        this.list[index].num -= 1
                    }
                },
                addNumber(index){
                    this.list[index].num += 1
                },
                allmoney(){
                    let num = 0;
                    for (var i in this.list){
                        num +=this.list[i].price*1*this.list[i].num;
                    }
                    return num
                },
                emptyBox(){
                    if(this.list.length == 0){
                        return "购物车为空~"
                    }
                }

            }
        })
        app.mount('#app')
    </script>
</body>
</html>

9、效果展示：

佳学

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
使用vue3技术实现简单的书籍购物车功能

为了实现购物车物品序号的动态绑定，将购物车序号以index下标+1的方式，用插值表达式进行输出。2、在挂载的div中加入添加输入框，并使用v-model指令实现双向数据绑定。5、在methods方法中定义添加方法add()并在data函数中接收输入框输入的内容。1、通过CDN方法引入vue插件。3、使用v-for指令实现数据遍历。通过插值表达式接收方法返回值。7、购物车清空后显示的内容。
复制链接

扫一扫

专栏目录