Vue脚手架系列03-购物车操作

1.模拟一个购物车操作

• App.vue---父组件

  • 引入cart购物车组件，向其中传入list数据

//App.vue

<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in cartList" :key="index">
        <h3>{{item.title}}</h3>
        <p>{{item.price}}</p>
      </li>
    </ul>
    <my-cart :cart="cartList" :title="title"></my-cart>
  </div>
</template>

<script>
import myCart from "./components/Cart";
export default {
  name: 'App',
  components: {
    myCart,
  },
  data() {
    return {
      cartList:[
        {id:1,title:"vue实战开发",price:996,active:true,count:1},
        {id:2,title:"es6实战开发",price:998,active:true,count:1},
        {id:3,title:"python实战开发",price:920,active:true,count:1},
        {id:4,title:"react实战开发",price:123,active:true,count:1},        
      ],
      title:"我的购物车"
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

• 购物车组件--cart.vue

<template>
    <div>
        <h2>{{title}}</h2>
        <table border="1">
            <tr>
                <th>#</th>
                <th>课程：</th>
                <th>单价：</th>
                <th>数量：</th>
                <th>总价：</th>
            </tr>
            <tr v-for="(item,index) in cart" :key="index">
                <td >
                    <input type="checkbox" v-model="item.active">    
                </td>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="reduc(index)">-</button>
                    {{item.count}}
                    <button @click="add(index)">+</button>
                </td>
                <td>
                    ¥{{item.price*item.count}}
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">{{activeCount}}/{{count}}</td>
                <td colspan="2">{{allCount}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    name:"cart",
    props:["title","cart"],
    data() {
        return {

        }
    },
    methods: {
        remove(i){
            if(window.confirm("确定要删除么？")){
                this.cart.splice(i,1);
            }
        },
        reduc(i){
            let count = this.cart[i].count;
            count >1 ? this.cart[i].count -=1 : this.remove(i)
        },
        add(i){
            this.cart[i].count+=1;
        }
    },
    computed: {
        count(){
            return this.cart.length;
        },
        activeCount(){
            return this.cart.filter(v=>v.active).length;
        },
        activeitem(){
            return this.cart.filter(v=>v.active);
        },
        allCount(){

            // console.log(this.activeitem)
            // let sum=0;
            // this.activeitem.forEach(item => {
            //     // if(item.active){
            //         sum += item.price * item.count
            //     // }
            // });
            // return sum;

            return this.cart.reduce((sum,c)=>{
                if(c.active){
                    sum += c.price * c.count
                }
                return sum;
            },0); 
        }
    },
}
</script>
<style scoped>
table{
    text-align: center;
}
</style>

知识点小结：

• 注意ruduce方法的使用:juejin.cn/post/684790…
• computed方法是可以在各自的计算中使用的，例如我可以在allCount中通过this.activeitem去遍历

问题：

上述代码实现的功能，在count为0的时候，移除对应的数据后，再刷新页面，数据有恢复了，后续要做数据持久化，不过下节先来搞下mock的假数据吧