Vue 金额计算
使用Vue計算商品金額。
**功能分析:**輸入商品單價和商品數(shù)量,設(shè)置固定的運(yùn)費(fèi)價格,直接會顯示商品總價格。
效果演示
原始樣式(我設(shè)置的運(yùn)費(fèi)是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>件數(shù):<input type="text" v-model="ipt2" />件</div><div>運(yùn)費(fèi):{{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>掃一掃關(guān)注我的公眾號獲取更多資訊呦!!!
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
- 上一篇: import lombok 报错_Lom
- 下一篇: 获取数据库内容放入下拉框中