VUE之购物车
更新:HHH   时间:2023-1-7



我写了个简单的购物车如下!

首先是商品列表:

这个数据先是假数据,以后再改正

好, 商品列表就写完了, 商品类,就三个属性!

我们重点看,添加到购物车的逻辑! addItem() 方法

当我们得到购物车的数据的时候,我们就开始将数组真正传递给购物车了!

一个传递,另外我们购物车组件就得接收!

Cart.vue

<template>

    <div>

        <h3>{{name}}</h3>

            <!--购物车列表  -->

            <table>

                <tr>

                    <th>选中</th>

                    <th>商品名称</th>

                    <th>价格</th>

                    <th>数量</th>

                    <th>单品总价</th>

                    <th>操作</th>

                </tr>

                <tr v-for = " c in cartList" :key = "c.id">

                    <td>

                        <!-- 双向数据绑定 -->

                        <input type="checkbox" v-model="c.active">

                    </td>

                    <td>

                        {{c.name}}

                    </td>

                    <td>{{c.price}}</td>

                    <td>

                        <button @click = "addCount(c.id)">add</button>

                        {{c.count}}

                        <button @click = "minuxCount(c.id)">minus</button>

                    </td>

                    <td>{{c.count * c.price}}</td>

                    <td>

                        <button @click = "deleteFromCart(c.id)">删除</button>

                    </td>

                </tr>

                <tr v-if="this.cartList.length">

                    <td>总价格</td>

                    <!-- 计算属性的写法 -->

                    <td colspan="5">{{getTotal}}</td>

                </tr>

            </table>

 

            

    </div>

</template>

 

<script>

    //  我们做事情,脸皮要厚!

    export default {

          name:"cart",

          data(){

              return {

 

              }

          },

        //   接受参数的信息

          props:["name","cartList"],

          methods:{

              addCount(index){

                 const good =this.cartList.find(item=>item.id==index);

                 good.count++;   

              },

              minuxCount(index){

                     const good =this.cartList.find(item=>item.id==index);

                     if(good.count==0){

                         return;

                     }

                     good.count--;

              },

              deleteFromCart(index){

                  // 找到具体的商品

                   const good =this.cartList.find(item=>item.id==index);

                   if(window.confirm("您确定删除该商品嘛?")){

                                                                                    function(){ //亨达全球HantecGlobal返佣 http://www.kaifx.cn/broker/hantecglobal.html

                       // 在这里执行删除操作

                       let i = this.cartList.indexOf(good);

                       // splice 删除操作,可以修改原数组,昨天我们学过! 不要忘记了

                       this.cartList.splice(i,1);

                   }

              }

 

          },

          computed:{

              //计算总价格

              getTotal(){

                  var sum = 0;

                  this.cartList.forEach(element => {

                      if(element.active){

                        sum+=element.price*element.count;

                      }

                  });

                  return sum;

              }

          }

 

    }

</script>

<style  scoped>

    .cart_box{

        width:600px;

        margin: 10px auto;

    }

</style>

这个Cart.vue 中,我用到了,计算属性(计算总价格)

还用到了,如果得到元素在数组中的下标

还用到了,双向数据绑定!

我这个绑定就是绑定的 是否选中这个逻辑,我绑定到了,购物车中,商品的一个字段!

至于v-for 遍历时,key 的绑定我选择了,商品的id 

行,上面还缺,一个商品类表那个组件的代码!

HelloWorld.vue

<template>

<!--  每个组件必须有一个根组件,这点要明确的知道! -->

  <div>

    <h2>{{ msg }}</h2>

 

  <!--  商品列表信息 -->

  <ul>

      <li v-for="(g,index) in goods" :key="index">

            {{g}} --{{g.name}}

        <button @click = "addItem(index)">添加到购物车</button>

      </li>

  </ul>   

 

  <!--  购物车信息 -->

<!--  使用注册进来的组件 -->

<cart name="action" :cartList="cartList"></cart>

</div>

</template>

 

<script>

 

// 我彻底蒙了, 除了一些特别的是函数,别的都是:

// 导入购物车组件

import Cart from './Cart.vue';

export default {

  name: 'HelloWorld',

  components:{

    //  局部注册功能!

    Cart

  },

  data(){

    return {

      show:false,

      // 购物车列表信息

      cartList:[],

      goods:[

        {

          id:"1001",

          name:"道德经",

          price:201

        },{

           id:"1002",

          name:"道德经2",

          price:203

        },{

           id:"1003",

          name:"道德经3",

          price:204         

        }

      ]

    }

  },

  props: {

    // 指定接受参数的类型

    msg: String

  },

  methods:{

    addItem(index){

      // 得到该商品

      const  good = this.goods[index];

      const item = this.cartList.find(item=>item.id == good.id);

      // 如果item 不为空,则表示已经添加到购车中了

     if(item){

        item.count+=1;

      }else{

        this.cartList.push({

              ...good,

               count:1,

               active:true

        }

        );

      }

    }

  }

 

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h4 {

  margin: 40px 0 0;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

整体,就是 HelloWorld.vue 里面使用 Cart.vue

gif动图我就不做了,以后我会下个工具做个动图:

 

 

 


返回web开发教程...