您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关如何使用Vue实现简单的购物车功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下
代码:
<template> <div> <div> <span>手机: </span> <span>价格</span> <input type="number" v-model.number="phonePrice"> <span> 数量 </span><input type="number" v-model.number="phoneCount"> <span> 小计: </span><span>{{phoneTotal}}元</span> </div> <div> <span>电脑: </span> <span>价格</span> <input type="number" v-model.number="computerPrice"> <span> 数量 </span><input type="number" v-model.number="computerCount"> <span> 小计: </span><span>{{computerTotal}}元</span> </div> <div> <span>运费: </span><input type="number" v-model.number="freight"><span>元</span><br> <span>共计: {{total}}元</span> <p>优惠: {{discounts}}元</p> <p>应付: {{allPrice}}</p> </div> </div> </template> <script> export default { data () { return { phonePrice: '', // 手机单价 phoneCount: '', // 手机数量 computerPrice: '', // 电脑单价 computerCount: '', // 电脑数量 freight: '', // 运费 discounts: '' } }, computed: { phoneTotal () { return this.phonePrice * this.phoneCount }, computerTotal () { return this.computerPrice * this.computerCount }, // 总价 total () { return this.computerTotal + this.phoneTotal + this.freight }, allPrice () { return this.total - this.discounts } }, watch: { total: { depp: true, handler () { if (this.phoneTotal + this.computerTotal > 5000 && this.phoneTotal + this.computerTotal < 8000) { this.discounts = 100 } else if (this.phoneTotal + this.computerTotal > 8000) { this.discounts = 200 } } } } } </script> <style scoped lang='less'> </style>
关于“如何使用Vue实现简单的购物车功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。