本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vuejs手把手教你写一个完整的购物车实例代码
- 基于Vuejs实现购物车功能
- Vue实现购物车功能
- vue实现购物车小案例
- vue实现商城购物车功能
- vue 实现购物车总价计算
- vuex实现的简单购物车功能示例
- vue+vant-UI框架实现购物车的复选框全选和反选功能
- vue实现购物车抛物线小球动画效果的方法详解
- Vue.js实现的购物车功能详解
本文由 华域联盟 原创撰写:华域联盟 » Vue实现简单的购物车案例
转载请保留出处和原文链接:https://www.cnhackhy.com/82687.htm