Vue实现简单的购物操作

最新推荐文章于 2024-04-06 00:53:44 发布

chonyhaha

最新推荐文章于 2024-04-06 00:53:44 发布

阅读量610

点赞数

分类专栏： Vue简单操作文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/chonyhaha/article/details/123095482

版权

Vue简单操作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实现简单的购物车操作

功能

（1）购物删除
（2）不同数量的商品价格汇总
（3）全选功能的实现
（4）选择商品数量多少决定全选与否

实现前提

（1）安装 vue的cdn支持js文件就可以了
补充一句，采用 vue3，从编码方式可以看出

实现原理

vue的双向绑定，以及其他的点击触发事件

样式展示：

购物车简单的展示

代码

<!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">
    <script src="./Vue_next.js"></script>
    <title>购物车</title>
</head>
<style>
    li{
        display:flex;
        justify-content: space-around;
        padding: 10px;
    }
    li img{
        width: 100px;
    }
</style>
<body>
    <!-- 实现购物车功能,采用Vue-3架构 -->
    <!-- vue的数据联动性比较强,牵一发动全身 -->
    <!-- v-model简直是太神奇了，动态获取变化的值，很舒服呐 -->
    <div id="root">
          <input type="checkbox" v-model="isAll" @change="handleAllChecked()"/>全选/全不选
          <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" alt="商品图片"/>
                <div>{{item.name}}</div>
                <div style="color:red">￥{{item.price}}</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="handleDelete(index,item.id)">删除</button>
                </div>
              </li>
          </ul>
            <div>总金额:{{sum()}}</div>
            {{checklist}}
    </div>
    <!-- 差点被自己的愚蠢给秀哭了 -->
     <script >
           var obj={
               data(){
                   return {
                    isAll:false,
                    checklist:[],  // 定义勾选的数组形式
                    // 商品数组嘛
                       datalist:[
                        {
                          name:'商品1',
                          price:30,
                          number:1,
                          id:1,
                          limit:10,
                          pic:"https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                       },{
                          name:'商品2',
                          price:150,
                          number:1,
                          id:2,
                          limit:115,
                          pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                       },
                       {
                          name:'商品3',
                          price:100,
                          number:1,
                          id:3,
                          limit:1005,
                          pic:"https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                       }]
                   }
               },
               methods:{
                   sum(){
                       // 计算选中商品价值
                       var total=0;
                       this.checklist.forEach(item => {
                           total+= item.price*item.number
                       });
                       return total;
                   },
                   // 删除功能  
                   // 有一点就很强大，只要绑定了Vue,里面item的id就可以轻易使用 
                   handleDelete(index,id){
                       this.datalist.splice(index,1);
                    // 采用过滤方法清除掉不需要的id
                     this.checklist = this.checklist.filter(item=>item.id!==id)
                     // 同步一下状态
                     this.handleItemChecked();
                   },
                   // 全选的功能是依赖双向绑定实现的，因为checklist发生变化，所以input选中按钮发生变化
                   handleAllChecked(){
                      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;
                        }
                   }
               }
           }
        var vm = Vue.createApp(obj).mount('#root')
     </script>
</body>
</html>