您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue怎么實現(xiàn)計算器封裝”,在日常操作中,相信很多人在vue怎么實現(xiàn)計算器封裝問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue怎么實現(xiàn)計算器封裝”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
效果如下:
文件目錄
我們導(dǎo)入了四個js包,在下面有源代碼,當(dāng)前計算器頁只有一個valculator.vue文件。
valculator.vue:<html代碼>
template> <div class="about"> <h2>這是個計算器你信嗎</h2> <van-cell-group type="text"> <van-field οninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g, '').replace(/^0{1,}/g,'')" v-model="inputValue" placeholder="請輸入數(shù)字" /> </van-cell-group> <div > <van-grid clickable :column-num="4" :gutter="10"> <van-grid-item @click="onclick(i)" v-for="(num, i) in dataNum" :key="i" :text="dataNum[i]" /> </van-grid> </div> </div> </template>
valculator.vue:《js方法》
<script> // eslint-disable-next-line no-unused-vars import { Field } from 'vant' export default { data () { return { // 數(shù)字加減乘除數(shù)組 dataNum: [ '+', '-', '*', '/', '1', '2', '3', '< X', '4', '5', '6', '=', '7', '8', '9', '0' ], inputValue: '', // input當(dāng)前顯示值 inputStorage: '', // input輸入值存儲 calculator: '', // 解析拿到的值 temporaryVariables1: '', // 存儲臨時計算拼接值1 temporaryVariables2: '', // 存儲臨時計算拼接值2 temporaryOperator: '' // 存儲臨時運算符 } }, methods: { // 點擊事件 onclick (index) { this.parsing(index) // 解析當(dāng)前的值 this.judge() // 判斷進(jìn)行運算 }, // 解析當(dāng)前拿到的值 parsing (index) { switch (index) { case 4: this.calculator = '1' break case 5: this.calculator = '2' break case 6: this.calculator = '3' break case 8: this.calculator = '4' break case 9: this.calculator = '5' break case 10: this.calculator = '6' break case 12: this.calculator = '7' break case 13: this.calculator = '8' break case 14: this.calculator = '9' break case 15: this.calculator = '0' break case 0: this.calculator = '+' break case 1: this.calculator = '-' break case 2: this.calculator = '*' break case 3: this.calculator = '/' break case 11: this.calculator = '=' break case 7: this.calculator = 'X' this.Clear() break default: break } // this.outValue = this.calculator; // this.inputBox(); // console.log(this.calculator); }, // 判斷是哪個運算符 judge () { if (this.calculator === '=') { this.equal() } else if (this.calculator === 'X') { this.Clear() } else { this.showOn() // 顯示當(dāng)前的值 this.calculation() // 計算當(dāng)前的值 } }, // 計算當(dāng)前的值 calculation () { // 如果為空表示當(dāng)前為第一個運算符,否則開始計算 const vae = this.isNumber(this.calculator) // 判斷當(dāng)前輸入值是否為數(shù)字 if (this.temporaryOperator === '') { if (vae === false) { this.temporaryOperator = this.calculator // 存儲當(dāng)前計算值 } else { this.temporaryVariables1 += this.calculator // 計算的值:加減觸發(fā)前拼接的值 } } else { if (vae === false) { this.temporaryVariables1 = this.Retrieval.retrieval( this.temporaryOperator, this.temporaryVariables1, this.temporaryVariables2 ) // 如果當(dāng)前有輸入運算法調(diào)取加減乘除 this.assignmentConversion() // 清空第二個數(shù) this.temporaryOperator = this.calculator // 計算完后保留當(dāng)前的運算符 } else { this.temporaryVariables2 += this.calculator // 繼續(xù)第二個拼接 } } }, // 判斷是否為數(shù)字:“12.3”等都為true, “哈哈”、“12.33”等都為false isNumber (val) { var regPos = /^\d+(\.\d+)?$/ // 非負(fù)浮點數(shù) var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 負(fù)浮點數(shù) if (regPos.test(val) || regNeg.test(val)) { return true } else { return false } }, // 等于 equal () { this.temporaryVariables1 = this.Retrieval.retrieval( this.temporaryOperator, this.temporaryVariables1, this.temporaryVariables2 ) // 調(diào)取加減乘除 this.assignmentConversion() // 清空第二個數(shù) this.inputValue = this.temporaryVariables1 // 將計算后的值顯示在屏幕上 this.inputStorage = '' // 清空之前存儲的值 }, // 清空第二個數(shù) assignmentConversion () { this.temporaryVariables2 = '' // 第二個清空用來再次保留 }, // 清除顯示的數(shù)據(jù) Clear () { this.inputValue = '' // 顯示的值 this.inputStorage = '' // input輸入值存儲 this.calculator = '' // 解析拿到的值 this.temporaryVariables1 = '' // 存儲臨時計算拼接值1 this.temporaryVariables2 = '' // 存儲臨時計算拼接值2 this.temporaryOperator = '' // 存儲臨時運算符 }, // 顯示當(dāng)前的值 showOn () { this.inputValue = this.inputStorage // 之前存儲先賦給要顯示的 this.inputValue += this.calculator // 要顯示的值再次加上當(dāng)前點擊的值 this.inputStorage = this.inputValue // 同步要存儲的值 } } }
valculator.vue:《style》
<style scoped> div.inputAll { position: relative; } div.inputOne { position: absolute; top: 10%; /* border-bottom:1px solid gray; */ } div.inputTwo { position: absolute; top: 15%; } div.inputLine { border-bottom: 1px solid gray; top: 12.5%; position: absolute; } </style>
導(dǎo)入其他js文件:
retrieval.js:計算器加減乘除選擇器
// eslint-disable-next-line no-unused-vars import Add from '../valculator/add' // eslint-disable-next-line no-unused-vars import Subtraction from '../valculator/subtraction' import Multiplication from '../valculator/multiplication' export default { retrieval: function (operator, variables1, variables2) { switch (operator) { case '+': // 調(diào)取公共加法 // eslint-disable-next-line no-undef variables1 = Add.add(variables1, variables2) break case '-': // 調(diào)取公共減法 // eslint-disable-next-line no-undef variables1 = Subtraction.subtraction(variables1, variables2) break // eslint-disable-next-line no-duplicate-case case '*': // 調(diào)取公共乘法 // eslint-disable-next-line no-undef variables1 = Multiplication.multiplication(variables1, variables2) break default: break } return variables1 } }
add.js:加法操作
export default { add: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) + Number(addTwo) // 顯示當(dāng)前的值 return addOne } }
multiplication.js:乘法操作
export default { multiplication: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) * Number(addTwo) // 顯示當(dāng)前的值 return addOne } }
subtraction.js:減法操作
export default { subtraction: function (addOne, addTwo) { // eslint-disable-next-line no-unused-vars addOne = Number(addOne) - Number(addTwo) // 顯示當(dāng)前的值 return addOne } }
到此,關(guān)于“vue怎么實現(xiàn)計算器封裝”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。