Vue 金额计算
使用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>掃一掃關注我的公眾號獲取更多資訊呦!!!
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
- 上一篇: import lombok 报错_Lom
- 下一篇: 获取数据库内容放入下拉框中