vue實現簡易的計算器功能
阿新 • • 發佈:2021-11-26
本文例項為大家分享了實現簡易計算器功能的具體程式碼,供大家參考,具體內容如下
實現功能:將兩個輸入框中的值進行加減乘除計算
用到的知識點:
1.v-model資料雙向繫結
2. .number轉化為數字
3.@click點選事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //選擇自己的vue位置 <script src="..//vue.js" type="text/" charset="utf-8"></script> </head> <body> <div id="box"> <!-- 將第一個值轉換為數字 --> <input type="number" v-model.number="num1"/> <select v-model="str"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="number"v-model.number="num2"/> <!-- 點選等號執行cal函式裡的內容 --> <button type="button" @click="calc">=</button> <!-- 將結果輸出 --> <input type="text"/ v-model="num3"> </div> </body> <script type="text/script"> var vm = new Vue({ el:"#box",data:{ // 初始輸入框中的數值 num1:0,http://www.cppcns.comnum2:0,num3:0,str:'+' },methods:{ calc(){ if(this.str=="+"){ this.num3=this.num1+this.num2 }else if(this.str=="-"){ t客棧his.num3=this.num1-this.num2 }else if(this.str=http://www.cppcns.com="*"){ this.num3=this.num1*this.num2 }else if(this.str=="/"){ this.num3=t程式設計客棧his.num1/this.num2 } } } }) </script> </html>
結果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。