一.界面样式以及案例需求如下:
二.源码:
三.实现思路:
主要运用到 v-model 数据视图双向绑定和 computed 计算属性两个技术点,
1.定义数据手机价格(mobilePrice)和手机数量(mobileNumber)以及电脑价格(computerPrice)和电脑数量(computerNumber)和运费(sendPrice).这些数据都运用 v-model 进行数据绑定
2.定义计算属性手机价格小计(mobileCount),电脑价格小计(computerCount),总价(allCount),优惠(Discount)和最后应付价格(truePrice),它们之间的关系见上图源码