标签：good num item price 购物车 案例 第五章 goods set

一、项目运行效果

• 1、点击增加与减少小计会变化
• 2、商品前面复选框勾选后会计算总金额

二、具体代码

• 1、html代码

<div id="app">
    <ul>
        <li v-for="good of goods">
            <input type="checkbox" @click="checkbox(good)" />
            <span>商品名称:{{good.goodname}}</span>
            <input type="button" value="-" @click="changeNum(0,good)" />
            <input type="number" v-bind:value="good.num || 0" />
            <input type="button" value="+" @click="changeNum(1,good)" />
            <span>单价:{{good.price}}</span>
            <span>小计:{{((good.num*good.price)?(good.num*good.price):0)|price}}</span>
        </li>
    </ul>
    <p>总金额:{{allPrice | price}}</p>
</div>

• 2、js代码

var app = new Vue({
    el: '#app',
    data: {
        goods: [{
            'id': 0,
            'goodname': '肥皂',
            'price': 4.3
        }, {
            'id': 1,
            'goodname': '洗发水',
            'price': 34
        }, {
            'id': 2,
            'goodname': '洗衣粉',
            'price': 7.3
        }],
        goodnumber: null,
    },
    methods: {
        // 改变数量
        changeNum(arg1, item) {
            if (!item.num) {
                // $set是添加值
                this.$set(item, 'num', 0);
            }
            // 判断为真的时候为增加的方法,否则为假的方法
            if (arg1) {
                item.num++;
            } else {
                item.num--;
            }
        },
        // 设置选中与不选中
        checkbox(item) {
            if (item.active) {
                this.$set(item, 'active', false);
            } else {
                this.$set(item, 'active', true);
            }
            console.log(item);
        }
    },
    filters: {
        price(arg) {
            return arg.toFixed(2) + '元';
        }
    },
    computed: {
        // 计算总价
        allPrice() {
            var result = 0;
            for (var i in this.goods) {
                if (this.goods[i].active) {
                    result += this.goods[i].price * this.goods[i].num;
                }
            }
            return result;
        }
    }
})

标签：good,num,item,price,购物车,案例,第五章,goods,set
来源： https://blog.51cto.com/u_3409716/2904701

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。