https://cn.vuejs.org/v2/api/#... <template> <div> <transition> <div @click="decreaseCart" v-show="food.count"> <span></span> </div> </transition> <div v-show="food.count">{{food.count}}</div> <div @click="increaseCart"> <i></i> </div> </div> </template> <script> import Vue from 'vue' export default { props:{ food:{ type:Object } }, methods:{ decreaseCart(){ this.food.count--; }, increaseCart(){ if(!this.food.count){ Vue.set(this.food,'count',1); }else{ this.food.count++; } } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .cartcontrol { font-size: 0; } .cartcontrol .cart-decrease { display: inline-block; width: 26px; height: 26px; font-size: 26px; color: #b4b4b4; } .cartcontrol .cart-count { display: inline-block; width: 25px; text-align: center; font-size: 12px; line-height: 26px; vertical-align: top; } .cartcontrol .cart-add { display: inline-block; width: 26px; height: 26px; font-size: 26px; color: #ffd161; position: relative; } .cartcontrol .cart-add .bg { width: 20px; height: 20px; border-radius: 50%; background: black; position: absolute; left: 3px; top: 3px; z-index: -1; } .move-enter-active, .move-leave-active { transition: all 0.5s linear; } .move-enter, .move-leave-to { transform: translateX(20px) rotate(180deg); } </style>
购物车组件
我们现在创建shopcart购物车组件。