【VUE框架实现简单购物车编写】

weixin_456

已于 2024-03-30 10:51:29 修改

阅读量377

点赞数 8

文章标签： javascript 前端 vue.js

于 2024-03-30 10:17:30 首次发布

本文链接：https://blog.csdn.net/weixin_45642112/article/details/137166858

版权

使用VUE框架实现简单购物车编写

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
            align-items: center;
        }
        li img{
            width:100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="box">
        <!-- <button @click="checkList=datalist">全选</button>
        <button @click="checkList=[]">取消</button> -->
        <input type="checkbox" v-model="isAll" @change="handleAll()">全选/取消 
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id">
                <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChange()">
                <img :src="item.pic">
                <div>
                    <div>{{item.name}}</div>
                    <div style="color:red">￥{{item.price}}</div>
                </div>

                <div>
                    <button @click="item.number--" :disabled="item.number===1">-</button>
                    <span>{{item.number}}</span>
                    <button @click="item.number++" :disabled="item.number===item.limit">+</button>
                </div>

                <div>
                    <button @click="handleDeleteClick(index,item.id)">删除</button>
                </div>
            </li>
        </ul>
        <div>总金额：{{computedSum}}</div>
    </div>

    <script>
        var obj={
            data(){
                return{
                    isAll:false,
                    checkList:[], //记录datalist所有被勾选数据
                    datalist:[{
                        name:"商品1",
                        price:10,
                        number:1,
                        id:1,
                        limit:5,//限购
                        pic:'1.png'
                        
                    },
                    {
                        name:"商品2",
                        price:20,
                        number:2,
                        id:2,
                        limit:10,
                        pic:'2.png'
                    },
                    {
                        name:"商品3",
                        price:30,
                        number:3,
                        id:3,
                        limit:15,
                        pic:'3.png'
                    }
                ]
                }
            },
            methods:{
                handleDeleteClick(index,id){
                    this.datalist.splice(index,1)
                    this.checkList=this.checkList.filter(item=>item.id!==id)

                    this.handleItemChange()
                },
                handleAll(){
                    if(this.isAll){
                        this.checkList=this.datalist
                    }
                    else{
                        this.checkList=[]
                    }       
                },
                handleItemChange(){
                    // this.handleAll()
                    if(this.checkList.length===this.datalist.length){
                        this.isAll=true
                    }
                    else{
                        this.isAll=false
                    }
                }
            },
            computed:{
                computedSum(){
                    var total=0
                    this.checkList.forEach(item => {
                        total+=item.price*item.number
                        
                    });
                    return total
                }
            }
        }
        Vue.createApp(obj).mount("#box")

    </script>
    
</body>
</html>

HTML的head部分

利用script 引入vue3，style用于布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
            align-items: center;
        }
        li img{
            width:100px;
            height: 100px;
        }

    </style>
</head>

body中的div部分

div 部分用于创建组件以及使用vue的指令，函数和状态

<div id="box">
        <!-- <button @click="checkList=datalist">全选</button>
        <button @click="checkList=[]">取消</button> -->
        <input type="checkbox" v-model="isAll" @change="handleAll()">全选/取消 
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id">
                <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChange()">
                <img :src="item.pic">
                <div>
                    <div>{{item.name}}</div>
                    <div style="color:red">￥{{item.price}}</div>
                </div>

                <div>
                    <button @click="item.number--" :disabled="item.number===1">-</button>
                    <span>{{item.number}}</span>
                    <button @click="item.number++" :disabled="item.number===item.limit">+</button>
                </div>

                <div>
                    <button @click="handleDeleteClick(index,item.id)">删除</button>
                </div>
            </li>
        </ul>
        <div>总金额：{{computedSum}}</div>
    </div>

body中的script部分

script 部分用于vue代码的编写。obj是一个对象，其中的data(),methods,computed是固定的。

    <script>
    	//obj是一个对象，其中的data(),methods,computed是固定的
        var obj={
        	//用于记录vue3中的状态
            data(){
                return{
                    isAll:false,
                    checkList:[], //记录datalist所有被勾选数据
                    datalist:[{
                        name:"商品1",
                        price:10,
                        number:1,
                        id:1,
                        limit:5,//限购
                        pic:'1.png'
                        
                    },
                    {
                        name:"商品2",
                        price:20,
                        number:2,
                        id:2,
                        limit:10,
                        pic:'2.png'
                    },
                    {
                        name:"商品3",
                        price:30,
                        number:3,
                        id:3,
                        limit:15,
                        pic:'3.png'
                    }
                ]
                }
            },
            //用于连接动作
            methods:{
                handleDeleteClick(index,id){
                    this.datalist.splice(index,1)
                    this.checkList=this.checkList.filter(item=>item.id!==id)

                    this.handleItemChange()
                },
                handleAll(){
                    if(this.isAll){
                        this.checkList=this.datalist
                    }
                    else{
                        this.checkList=[]
                    }       
                },
                handleItemChange(){
                    // this.handleAll()
                    if(this.checkList.length===this.datalist.length){
                        this.isAll=true
                    }
                    else{
                        this.isAll=false
                    }
                }
            },
            //一些用于用于计算的属性，计算总金额
            computed:{
                computedSum(){
                    var total=0
                    this.checkList.forEach(item => {
                        total+=item.price*item.number
                        
                    });
                    return total
                }
            }
        }
        //vue3的创建
        Vue.createApp(obj).mount("#box")

    </script>