vue實現(xiàn)簡單的計算器功能
更新時間：2022年09月14日 17:26:17 作者：山水不渡我
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)簡單計算器的具體代碼，供大家參考，具體內(nèi)容如下
1.功能
1) 、實現(xiàn)加減乘除混合（包含小數(shù)點）
2）、實現(xiàn)刪除退格
3）、實現(xiàn)內(nèi)容重置
2.效果圖
說實話不好看
3.代碼
1).HTML部分
?<div id='app'>
? ? ? ? <input type="text" v-model="band">
? ? ? ? <table>
? ? ? ? ? ? <tbody>
? ? ? ? ? ? ? ? <!-- 這里實現(xiàn)每3個數(shù)字換下一行 -->
? ? ? ? ? ? ? ? <tr v-for='(item,index) in list' :key='item.id' v-if="index%3==0">
? ? ? ? ? ? ? ? ? ? <td v-for='i in 3' v-if="list[i-1+index]!=null" @click='down(list[i-1+index].num)'>{{list[i-1+index].num}}</td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </tbody>
? ? ? ? </table>
? ? ? ? <button @click='add'>+</button>
? ? ? ? <button @click='sub'>-</button>
? ? ? ? <button @click='division'>/</button><br/>
? ? ? ? <button @click='multiplication'>*</button>
? ? ? ? <button @click='sum1'>=</button>
? ? ? ? <button @click='clear'>AC</button><br/>
? ? ? ? <button @click='delete1'> ? </button>
</div>2).CSS部分
<style>
? ? ? ? button {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? }
? ? ? ??
? ? ? ? td {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? border: 1px solid black;
? ? ? ? ? ? cursor: default
? ? ? ? }
? ? ? ??
? ? ? ? input {
? ? ? ? ? ? width: 150px;
? ? ? ? }
? ? ? ? #app {
? ? ? ? ? ? width: 160px;
? ? ? ? ? ? margin-top: 70px;
? ? ? ? ? ? margin-left: 600px;
? ? ? ? }
</style>3.vm實例
?<!-- 這里我是通過對vue文件的引入 -->
? ? <script src="./lib/vue-2.6.12.js"></script>
? ? <script>
? ? ? ? const vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? band: '', //展示在input中
? ? ? ? ? ? ? ? arr: [], //存儲輸入的數(shù)字和符號
? ? ? ? ? ? ? ? sum: 0, //計算總和
? ? ? ? ? ? ? ? under: '', //記錄每一次的數(shù)字和符號，然后放入arr數(shù)組，放入一次清除一次
? ? ? ? ? ? ? ? cheng: '', //記錄乘的結果
? ? ? ? ? ? ? ? chu: '', //記錄除的結果
? ? ? ? ? ? ? ? befornum: 0,
? ? ? ? ? ? ? ? afternum: 0, //befornum和afternum在sum中計算
? ? ? ? ? ? ? ? list: [{
? ? ? ? ? ? ? ? ? ? id: 0,
? ? ? ? ? ? ? ? ? ? num: 0
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? num: 1
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? num: 2
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? num: 3
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? ? ? num: 4
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 5,
? ? ? ? ? ? ? ? ? ? num: 5
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 6,
? ? ? ? ? ? ? ? ? ? num: 6
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 7,
? ? ? ? ? ? ? ? ? ? num: 7
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 8,
? ? ? ? ? ? ? ? ? ? num: 8
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 9,
? ? ? ? ? ? ? ? ? ? num: 9
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? id: 10,
? ? ? ? ? ? ? ? ? ? num: '.'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? //輸入數(shù)字
? ? ? ? ? ? ? ? down(n) {
? ? ? ? ? ? ? ? ? ? this.band += n
? ? ? ? ? ? ? ? ? ? this.under += n
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //實現(xiàn)刪除功能，這里我只能實現(xiàn)整個數(shù)字刪除
? ? ? ? ? ? ? ? delete1() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.under
? ? ? ? ? ? ? ? ? ? ? ? var replace = this.arr.pop()
? ? ? ? ? ? ? ? ? ? ? ? this.band = this.band.substring(0, this.band.lastIndexOf(replace));
? ? ? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? var replace = this.arr.pop()
? ? ? ? ? ? ? ? ? ? ? ? this.band = this.band.substring(0, this.band.lastIndexOf(replace));
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //判斷是否連續(xù)乘除
? ? ? ? ? ? ? ? panduan() {
? ? ? ? ? ? ? ? ? ? if (this.arr[this.arr.length - 2] == '/') {
? ? ? ? ? ? ? ? ? ? ? ? this.chu = parseFloat(this.arr[this.arr.length - 3]) / parseFloat(this.arr[this.arr.length - 1])
? ? ? ? ? ? ? ? ? ? ? ? this.arr.splice(this.arr.length - 3, 3);
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.chu
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (this.arr[this.arr.length - 2] == '*') {
? ? ? ? ? ? ? ? ? ? ? ? this.cheng = parseFloat(this.arr[this.arr.length - 3]) * parseFloat(this.arr[this.arr.length - 1])
? ? ? ? ? ? ? ? ? ? ? ? this.arr.splice(this.arr.length - 3, 3);
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.cheng
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //加法
? ? ? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.under
? ? ? ? ? ? ? ? ? ? ? ? this.panduan()
? ? ? ? ? ? ? ? ? ? ? ? this.band += '+'
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = '+'
? ? ? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //減法
? ? ? ? ? ? ? ? sub() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.under
? ? ? ? ? ? ? ? ? ? ? ? this.panduan()
? ? ? ? ? ? ? ? ? ? ? ? this.band += '-'
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = '-'
? ? ? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //除法
? ? ? ? ? ? ? ? division() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.band += '/'
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.under
? ? ? ? ? ? ? ? ? ? ? ? this.panduan()
? ? ? ? ? ? ? ? ? ? ? ? this.chu = ''
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = '/'
? ? ? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //乘法
? ? ? ? ? ? ? ? multiplication() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.band += '*'
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = this.under
? ? ? ? ? ? ? ? ? ? ? ? this.panduan()
? ? ? ? ? ? ? ? ? ? ? ? this.cheng = ''
? ? ? ? ? ? ? ? ? ? ? ? this.arr[this.arr.length] = '*'
? ? ? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //計算總和
? ? ? ? ? ? ? ? sum1() {
? ? ? ? ? ? ? ? ? ? if (this.under != '') {
? ? ? ? ? ? ? ? ? ? ? ? this.arr.push(this.under)
? ? ? ? ? ? ? ? ? ? ? ? this.panduan()
? ? ? ? ? ? ? ? ? ? ? ? ? ? //遍歷arr數(shù)組
? ? ? ? ? ? ? ? ? ? ? ? for (i = 0; i < this.arr.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (this.arr[i] == '+') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.arr[i + 1] = parseFloat(this.arr[i - 1]) + parseFloat(this.arr[i + 1])
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (this.arr[i] == '-') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.arr[i + 1] = parseFloat(this.arr[i - 1]) - parseFloat(this.arr[i + 1])
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? this.sum = this.arr[this.arr.length - 1]
? ? ? ? ? ? ? ? ? ? ? ? this.under = '' + this.sum
? ? ? ? ? ? ? ? ? ? ? ? this.band += '='
? ? ? ? ? ? ? ? ? ? ? ? this.band = '' + this.sum
? ? ? ? ? ? ? ? ? ? ? ? ?this.arr = []
? ? ? ? ? ? ? ? ? ? ? ? this.sum = 0
? ? ? ? ? ? ? ? ? ? }
?
?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //重置
? ? ? ? ? ? ? ? clear() {
? ? ? ? ? ? ? ? ? ? this.band = ''
? ? ? ? ? ? ? ? ? ? this.sum = 0
? ? ? ? ? ? ? ? ? ? this.arr = []
? ? ? ? ? ? ? ? ? ? this.under = ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue 監(jiān)聽 Treeselect 選擇項的改變操作
這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue插槽_特殊特性slot,slot-scope與指令v-slot說明
這篇文章主要介紹了Vue插槽_特殊特性slot,slot-scope與指令v-slot說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉外部鏈接的實現(xiàn)代碼，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
vue實現(xiàn)在v-html的html字符串中綁定事件
今天小編就為大家分享一篇vue實現(xiàn)在v-html的html字符串中綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁欄效果，分頁欄設計的步驟與實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
本篇文章主要介紹了基于VUE.JS的移動端框架Mint UI的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue服務端渲染實踐之Web應用首屏耗時最優(yōu)化方案
這篇文章主要介紹了Vue服務端渲染實踐之Web應用首屏耗時最優(yōu)化方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
element select實現(xiàn)組件虛擬滾動優(yōu)化
本文主要介紹了element select實現(xiàn)組件虛擬滾動優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進行處理)
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進行處理)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
在移動端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗與移動端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12