Vue實現(xiàn)手機計算器
本文實例為大家分享了Vue制作仿手機計算器的具體代碼,供大家參考,具體內(nèi)容如下
1.首先是把樣式做出來,按鈕是0-9,還有加減乘除,百分號,清除按鈕,小數(shù)點,等號、等等
2.把官方網(wǎng)站的JS插件引用,cn.vuejs.org/v2/guide/
頁面視圖
JS
new Vue({ el: "#app", data: { equation: '0', isDecimalAdded: false, //防止在一組數(shù)字中間輸入超過一個小數(shù)位 isOperatorAdded: false, //判斷之否已點擊 加、減、乘、除,防止連續(xù)點擊超過一個運算符號 isStarted: false, //判斷計算器是否已經(jīng)開始輸入數(shù)字,用于正負數(shù)和百分比計算的時候作一些判斷 }, methods: { //Check if the character is + - × ÷ isOperator(character) { //用來判斷character 是否加減乘除 return ['+', '-', '×', '÷'].indexOf(character) > -1 }, append(character) { //append(character)加減乘除 if (this.equation === '0' && !this.isOperator(character)) { if (character === '.') { this.equation += '' + character this.isDecimalAdded = true } else { this.equation = '' + character } this.isStarted = true return } if (!this.isOperator(character)) { if (character === '.' && this.isDecimalAdded) { return } if (character === '.') { this.isDecimalAdded = true this.isOperatorAdded = true } else { this.isOperatorAdded = false } this.equation += '' + character } if (this.isOperator(character) && !this.isOperatorAdded) { this.equation += '' + character this.isDecimalAdded = false this.isOperatorAdded = true } }, calculate() { //等于號的時候 let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/') this.equation = parseFloat(eval(result).toFixed(9)).toString() this.isDecimalAdded = false this.isOperatorAdded = false }, calculateToggle() { //點擊正負號 if (this.isOperatorAdded || !this.isStarted) { true } this.equation = this.equation + '* -1' this.calculate() }, calculatePercentage() { //點擊百分比 if (this.isOperatorAdded || !this.isStarted) { true } this.equation = this.equation + '* 0.01' this.calculate() }, clear() { //點擊AC this.equation = '0' this.isDecimalAdded = false //防止在一組數(shù)字中間輸入超過一個小數(shù)位 this.isOperatorAdded = false //判斷之否已點擊 加、減、乘、除,防止連續(xù)點擊超過一個運算符號 this.isStarted = false //判斷計算器是否已經(jīng)開始輸入數(shù)字,用于正負數(shù)和百分比計算的時候作一些判斷 } } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite+TS實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga,下面文章也將圍繞實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開相關(guān)內(nèi)容,具有一定的參考價值,需要的小伙伴可惡意參考一下2021-12-12vue 1.0 結(jié)合animate.css定義動畫效果
本文分步驟給大家介紹了Vue 1.0自定義動畫效果,vue1.0代碼結(jié)合animate.css定義動畫,頁面一定要引入animate.cdd,具體實例代碼大家參考下本文2018-07-07詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
本篇文章主要介紹了詳解如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件,具有一定的參考價值,有興趣的可以了解一下2017-06-06vue中created、watch和computed的執(zhí)行順序詳解
由于vue的雙向數(shù)據(jù)綁定,自動更新數(shù)據(jù)的機制,在數(shù)據(jù)變化后,對此數(shù)據(jù)依賴?的所有數(shù)據(jù),watch事件都會被更新、觸發(fā),下面這篇文章主要給大家介紹了關(guān)于vue中created、watch和computed的執(zhí)行順序,需要的朋友可以參考下2022-11-11vue以組件或者插件的形式實現(xiàn)throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實現(xiàn)throttle或者debounce,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05vue-router3.x和vue-router4.x相互影響的問題分析
這篇文章主要介紹了vue-router3.x和vue-router4.x相互影響的問題分析,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04