Vue学习--基础（3）--购物车案例

使用Vue父子组件传值，实现购物车的简单功能
**1.**使用+、- 按钮控制商品数量

• 点击+号按钮实现每种商品数量的加1
• 点击-号按钮实现每种商品数量的减1，当商品数量减为0时，不能再减

**2.**通过文本框改变商品数量

• 在文本框中直接输入数量，当文本框失去焦点时，总价发生改变
• 文本框中输入数值后，点击+、- 按钮在该数值的基础上进行商品数量的加减
• 点击删除按钮，删除该商品
  2.css部分代码

<style type="text/css">
        .container{}.container .cart{width: 300px;margin: auto;}.container .title{background-color: lightblue;height: 40px;line-height: 40px;text-align: center;}.container .total{background-color: #FFCE46;height: 50px;line-height: 50px;text-align: right;}.container .total span{color: red;font-weight: bold;}.container .total button{margin: 0 10px;background-color: #DC4C40;height: 35px;width: 80px;border: 0;}.container .item{height: 55px;line-height: 55px;position: relative;border-top: 1px solid #ADD8E6;}.container .item img{width: 45px;height: 45px;margin: 5px;}.container .item .name{position: absolute;width: 90px;top: 0;left: 55px;font-size: 16px;}.container .item .change{width: 100px;position: absolute;top: 0;right: 50px;}.container .item .change a{font-size: 20px;width: 30px;text-decoration: none;background-color: lightgray;vertical-align: middle;}.container .item .change .num{width: 40px;height: 25px;}.container .item .del{position: absolute;top: 0;right: 0px;width: 40px;text-align: center;font-size: 40px;cursor: pointer;color: red;}.container .item .del:hover{background-color: orange;}
</style>

3.html部分代码

<divid="app"><divclass="container"><my-cart></my-cart></div></div>

4.js部分代码

<script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript">var CartTitle={
            props:['uname'],
            template:`
            <div class="title">{{uname}}的购物车</div>`}var CartList={
            props:['list'],
            template:`
            <div>
                <div class="item" :key='item.id' v-for='item in list'>
                    <img :src='item.img'/>
                    <div class="name">{{item.name}}</div>
                    <div class="change">
                        <a href="" @click.prevent='sub(item.id)'>－</a>
                        <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'/>
                        <a href="" @click.prevent='add(item.id)'>＋</a>
                    </div>
                    <div class="del" @click='del(item.id)'>×</div>
                </div> 
                
            </div>`,
            methods:{changeNum:function(id, event){this.$emit('change-num',{
                        id: id,
                        type:'change',
                        num: event.target.value})},sub:function(id){this.$emit('change-num',{
                        id: id,
                        type:'sub'})},add:function(id){this.$emit('change-num',{
                        id: id,
                        type:'add'})},del:function(id){this.$emit('cart-del', id)}}}var CartTotal={
            props:['list'],
            template:`
                <div class="total">
                    <span>总价：{{total}}</span>
                    <button>结算</button>
                </div>`,
            computed:{total:function(){var t=0this.list.forEach(item=>{
                        t+= item.price* item.num})return t;}}}
        Vue.component('my-cart',{data:function(){return{
                    uname:'Tiny',
                    list:[{
                        id:1,
                        name:'TCL彩电',
                        price:1000,
                        num:1,
                        img:'../img/a.jpg'},{
                        id:2,
                        name:'机顶盒',
                        price:1000,
                        num:1,
                        img:'../img/b.jpg'},{
                        id:3,
                        name:'海尔冰箱',
                        price:1000,
                        num:1,
                        img:'../img/c.jpg'},{
                        id:4,
                        name:'小米手机',
                        price:1000,
                        num:1,
                        img:'../img/d.jpg'},{
                        id:5,
                        name:'PPTV电视',
                        price:1000,
                        num:2,
                        img:'../img/e.jpg'}]}},
            template:`
            <div class='cart'>
                <cart-title :uname='uname'></cart-title>
                <cart-list :list='list' @change-num='changeNum($event)'  @cart-del='delCart($event)'></cart-list>
                <cart-total :list='list'></cart-total>
            </div>`,
            components:{'cart-title': CartTitle,'cart-total': CartTotal,'cart-list': CartList},
            methods:{changeNum:function(val){if(val.type=='change'){this.list.some(item=>{if(item.id== val.id){
                                item.num= val.numreturntrue}})}elseif(val.type=='sub'){this.list.some(item=>{if(item.id== val.id){
                                item.num=parseInt(item.num)
                                item.num= item.num>0?(item.num-1):0returntrue}})}elseif(val.type=='add'){this.list.some(item=>{if(item.id== val.id){
                                item.num=parseInt(item.num)
                                item.num+=1returntrue}})}},delCart:function(id){var index=this.list.findIndex(item=>{return item.id== id})this.list.splice(index,1)}}})var vm=newVue({
            el:"#app",
            data:{}});</script>

5.小结
主要熟悉了父子组件间数据的传递。