前端进阶Vue框架-----表单控件绑定练习（购物车）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61656944/article/details/122972855

本文通过Vue.js结合ElementUI深入探讨前端开发中的表单控件绑定技术，以购物车功能为例，详细讲解如何实现动态数据交互，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <script src="/lib/vue3.global.js"></script>

    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px
        }

        li img{
            width: 100px;
        }
    </style>
</head>
<body>

    <div id="box">
        <input type="checkbox" v-model="isAll" @change="bandleAllChecked">全选/全不选
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id">
              

                <input type="checkbox"  v-model="checkList" :value="item" @change="handleItemChecked"> 

                <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>总金额：{{sum()}}</div>
        {{checkList}}

    </div>

    <script>
        var obj = {
            data(){
                return {
                    isAll:false,
                    checkList:[], //勾选的购物车数据
                    datalist:[{
                        name:"商品1",
                        price: 10,
                        number: 1,
                        id: 1,
                        limit: 5, //限购
                        pic:"http://img11.360buyimg.com/pop/s1180x940_jfs/t1/212696/22/12178/93310/6204b550E00e9eec7/6899c2f0b6ea324a.jpg.webp"
                    },
                    {
                        name:"商品2",
                        price: 20,
                        number: 2,
                        id: 2,
                        limit: 10, //限购
                        pic:"http://img11.360buyimg.com/pop/s1180x940_jfs/t1/212696/22/12178/93310/6204b550E00e9eec7/6899c2f0b6ea324a.jpg.webp"
                    },
                    {
                        name:"商品3",
                        price: 30,
                        number: 3,
                        id: 3,
                        limit: 15, //限购
                        pic:"http://img11.360buyimg.com/pop/s1180x940_jfs/t1/212696/22/12178/93310/6204b550E00e9eec7/6899c2f0b6ea324a.jpg.webp"
                    }
      
                    ]
                }
            },
            methods: {
                        sum(){

                            // 初始值
                            var total = 0;
                            // 累加计算 checkList数组的每一项的 价格*数量
                        this.checkList.forEach(item=>{
                            total+= item.price*item.number
                        })

                        return total

                        },

                        handleDeleteclick(index,id){
                        // 删除的是datalist--靠索引
                        // console.log(index);
                        this.datalist.splice(index,1)
                       
                        

                        // 删除checklist--靠id
                        // 过滤
                        this.checkList = this.checkList.filter(item=>item.id!==id)

                        // 同步一下状态

                        this.handleItemChecked()

                        },
                        // 全选
                        bandleAllChecked(){
                            if(this.isAll){
                                this.checkList = this.datalist
                            }else{
                                this.checkList = []
                            }

                        },

                        // 每项选择
                        handleItemChecked(){
                            if(this.checkList.length===this.datalist.length){
                                // 全选
                                this.isAll = true
                            }else{
                                // 全不选
                                this.isAll = false
                            }
                        }


             } 
                
        }
        Vue.createApp(obj).mount("#box")
    </script>
    
</body>