美文网首页
组件-购物车

组件-购物车

作者: 王wl | 来源:发表于2018-09-18 17:07 被阅读0次
<div class="container">
    <father></father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('father',{
        template:`
           <table class="table table-bordered table-hover">
                <top-title v-bind:tet='arr'></top-title>
                <bott-title v-bind:txt='fruit'></bott-title>
            </table> 
        `,
        data:function(){
            return{
                arr:['编号','名称','单价','数量','小计'],
                fruit:[
                    {uname:'香蕉',price:3,num:1,subprice:3},
                    {uname:'苹果',price:6,num:1,subprice:6},
                    {uname:'橘子',price:5,num:1,subprice:5},
                ],
            }
        }
    })
    Vue.component('top-title',{
        props:['tet'],
        template:  `
                <thead>
                    <tr  class='text-center'>
                        <th v-for='value in tet' class='text-center'>{{value}}</th>
                    </tr>
                </thead>
                `
    })
    //加减
    Vue.component('bott-title',{
        props:['txt'],
        template:`
                <tbody>
                    <tr v-for='(value,index) in txt' class="text-center">
                        <td>{{index+1}}</td>
                        <td>{{value.uname}}</td>
                        <td>{{value.price}}</td>
                        <td><button @click='add(index)'>+</button><span>{{value.num}}</span><button @click='aff(index)'>-</button></td>
                        <td>{{value.num*value.price}}</td>
                    </tr>
                    <tr>
                        <td colspan='5' class='text-center'>总价:{{total}}元</td>
                    </tr>
                </tbody> 
        `,
        data:function(){
            return{
                total:14
            }
        },
        methods:{
            add:function(index){
                this.txt[index].num++;
                this.txt[index].subprice=this.txt[index].num*this.txt[index].price;
                this.get()
            },
            aff:function(index){
                if(this.txt[index].num>1){
                    this.txt[index].num--;
                    this.txt[index].subprice=this.txt[index].num*this.txt[index].price;
                 this.get()
                }
            },
            get:function(){
                for(var i=0,sum=0;i<this.txt.length;i++){
                    sum+=this.txt[i].subprice
                }
                this.total=sum
            }
        }
    })
    new Vue({
        el:'.container',
    })
</script>

相关文章

  • Vuex(二) —— 用Vuex完成购物车案例

    目录 需求 需求分析组件分析组件通信 开发准备环境准备模块结构商品列表组件展示商品列表添加购物车我的购物车组件购物...

  • 13.vue父组件调子组件方法

    在写加入购物车功能时,需要实现点击购物车按钮,将子组件计数组件内的num,物品数归1,但是按钮属父组件,num属性...

  • Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件...

  • VUE组件(应用)

    全局变量: 局部变量: 使用组件添加或删除列表: 使用组件完成购物车: 利用组件传值: 组件——子传父: 组件是v...

  • 2018-12-09

    vue购物车(非代码) 我的购物车是一个组件,里面的true和false是我自己添加进去的,但是我进行的是,子组件...

  • 组件-购物车

  • 购物车组件

    后台tpl

  • vuex购物车的实现具体流程

    过程分析 1.首先购物车弹窗是一个组件,因为会出现在不同的页面中。 2.因为很多组件会用到购物车数据,所以统一放到...

  • 7-加入购物车、购物车删除(vuex)

    过程分析 1.首先购物车弹窗是一个组件,因为会出现在不同的页面中。2.因为很多组件会用到购物车数据,所以统一放到v...

  • 2018-09-19vue组件运用(父给子传)

    运用组件添加删除元素(父给子传) 父给子传(用props属性传值) 运用组件做购物车效果

网友评论

      本文标题:组件-购物车

      本文链接:https://www.haomeiwen.com/subject/lqopnftx.html