VUE复习之购物车

感谢大家的支持，我会继续努力学习，认真学习，天天向上，在这个月内，不端的学习大前端知识， 说白了，就是狂补 js 的知识

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

首先是商品列表：

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

 

好， 商品列表就写完了， 商品类，就三个属性！

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

 

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

 

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

Cart.vue

<template>
    <div class="cart_box">
        <h2>{{name}}</h2>
            <!--购物车列表  -->
            <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("您确定删除该商品嘛？")){
                       // 在这里执行删除操作
                       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 class="hello">
    <h1>{{ msg }}</h1>

  <!--  商品列表信息 -->
  <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>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {

  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 

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

gif动图我就不做了，以后我会下个工具做个动图：