vue-專案試手(1) 計算器(2)獲取結果
阿新 • • 發佈:2021-08-02
學了半天 發現還是js要求最多。
還有一些細節處理不細說。基本都是字串處理
處理結果函式編寫
calc(){
//替換算符
const strValue=this.resultValue.replace('x','*').replace('÷','/')
//計算
this.resultValue=eval(strValue)
}
總體程式碼
基本上最複雜的就是字串處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>迷你計算器</title> <style> body{ margin: 20px; } #app{ border: 1px solid #ccc; border-radius: 4px; width: 175px; height: 285px; padding: 10px; } #input-box{ width: 161px; margin-bottom: 10px; height: 30px; border: 1px solid #ccc; border-radius: 2px; background-color: white; color: #666; padding: 0 5px; text-align: right; } #app .btn{ width: 40px; height: 35px; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; background-color: white; font-weight: bold; color: #666; margin-bottom: 10px; } #app .btn:hover{ background-color: #333; color: white; } #app .btn-double{ width: 84px; } </style> </head> <body> <div id="app"> <result-box :get-value="resultValue"></result-box> <calc-box> <button class="btn" @click="clear">C</button> <button class="btn" @click="sign">+/-</button> <button class="btn" @click="symbol('x')">x</button> <button class="btn" @click="symbol('÷')">÷</button> <button class="btn" @click="input('1')">1</button> <button class="btn" @click="input('2')">2</button> <button class="btn" @click="input('3')">3</button> <button class="btn" @click="symbol('-')">-</button> <button class="btn" @click="input('4')">4</button> <button class="btn" @click="input('5')">5</button> <button class="btn" @click="input('6')">6</button> <button class="btn" @click="symbol('+')">+</button> <button class="btn" @click="input('7')">7</button> <button class="btn" @click="input('8')">8</button> <button class="btn" @click="input('9')">9</button> <button class="btn" @click="symbol('%')">%</button> <button class="btn" @click="input('0')">0</button> <button class="btn" @click="point()">.</button> <button class="btn btn-double" @click="calc">=</button> </calc-box> </div> <script src="../js/vue.js"></script> <script> //計算器結果框元件 const resultBox={ //父子通訊 props:['getValue'], //計算屬性 computed:{ value(){ return this.getValue; } }, template:` <input id="input-box" type="text" v-model="value" readonly> ` } //計算器輸入元件面板元件 const calcBox={ template:` <div id="calc-box"> <slot></slot> </div> ` } const app =new Vue({ el:'#app', data:{ resultValue:0 }, //元件 components:{ //計算器結果框元件 'result-box':resultBox, //計算器輸入元件面板元件 'calc-box': calcBox }, methods:{ input(params){ //拒絕重複0,並且防止0.x 被當0處理 if(parseInt(this.resultValue)===0 && !/0[\.|\s]/.test(this.resultValue)){ //轉化成數字是0 就直接替換掉 this.resultValue=params } else { this.resultValue+=params } }, //加減乘除算術公式 symbol(params){ this.resultValue+=' '+params+' ' }, //正負號設定 sign(){ const strValue=this.toStr() //得到最後一位數值 let lastNumber=strValue.substring(strValue.lastIndexOf(' ')) //得到之前的數值+符號 let preNumber=strValue.substr(0,strValue.lastIndexOf(' ')) //判斷是否有負號 if(lastNumber.indexOf('-')===-1){ lastNumber=' -'+lastNumber.trim() } else { lastNumber=' '+lastNumber.trim().substr(1) } this.resultValue=preNumber+lastNumber }, //處理小數點 point(){ const strValue=this.toStr() //得到最後一位數值 const lastNumber=strValue.substring(strValue.lastIndexOf(' ')) //判斷是否有小數點 if(lastNumber.indexOf('.')!==-1){ return } else{ this.resultValue+='.' } }, //轉化成字串 toStr(){ return this.resultValue.toString() }, clear(){ this.resultValue='0' }, //處理結果 calc(){ //替換算符 const strValue=this.resultValue.replace('x','*').replace('÷','/') //計算 this.resultValue=eval(strValue) } } }) </script> </body> </html>
效果: