用vue制作购物车（原创）

Html

Css


我的宝贝

    
        
            
                
                    
                        宝贝名称
                        宝贝价格
                        宝贝数量
                        操作
                    
                    
                    
                    
                
            
        
        
            总价：{{total}}
        
    

    
        没有宝贝...去逛逛

var products = [{
    title: 'iphone7',
    price: 5388,
    count: 1
}, {
    title: 'oppo',
    price: 2688,
    count: 1
}];

//定义一个组件
Vue.component('item', {
    props: ['product', 'index'],
    data: function() {
        return {
            isButtonDisabled: false,
            activeColor: 'black'
        }
    },
    methods: {
        add: function() {
            this.product.count++;
            this.isButtonDisabled = false
            this.activeColor = 'black'
        },
        sub: function() {
            this.product.count--;
            if (this.product.count <= 0) {
                this.isButtonDisabled = 'disabled';
                this.activeColor = '#ccc';
                return false;
            }

},
        del: function() {
            vm.items.splice(this.index, 1); //splice(start,count):删除数组
        }
    },
    template: "<tr>\
							<td>{{product.title}}</td>\
							<td>{{product.price}}</td>\
							<td>\
								<button v-on:click='add'>+</button>\
								<span>{{product.count}}</span>\
								<button v-on:click='sub' v-bind:disabled='isButtonDisabled' v-bind:style='{ color: activeColor }'>-</button>\
							</td>\
							<td><button v-on:click='del'>删除</button></td>\
						</tr>",
});

},
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

用vue制作购物车（原创）

代码描述：用vue制作购物车

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

纷飞舞

相关代码

我的宝贝

没有宝贝...去逛逛

用vue制作购物车（原创）

最新