使用Vue计算商品金额。
**功能分析:**输入商品单价和商品数量,设置固定的运费价格,直接会显示商品总价格。
效果演示
原始样式(我设置的运费是10)
输入商品单价和价格
代码演示
**注意:**引入Vue.js架包
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="out"><h1>金额计算</h1><div>单价:<input type="text" v-model="ipt1" />元</div><div>件数:<input type="text" v-model="ipt2" />件</div><div>运费:{{money}}<span>元</span></div><div>总金额:{{allMoney}}<span>元</span></div></div></body><script type="text/javascript">var vm = new Vue({el:"#out",data:{ipt1:"",ipt2:"",money:10,totle:""},computed:{allMoney(){if(this.ipt1*this.ipt2>88){this.money=0;return this.totle=this.ipt1*this.ipt2}else{this.money=10;return this.totle=this.ipt1*this.ipt2+this.money}} }})</script></html>
扫一扫关注我的公众号获取更多资讯呦!!!