vue实现简单的计算器功能

本文实例为大家分享了vue实现简单计算器的具体代码，供大家参考，具体内容如下

1.功能

1)  、实现加减乘除混合（包含小数点）
2）、实现删除退格
3）、实现内容重置

2.效果图

说实话不好看

3.代码

1).HTML部分

 <div id='app'>
        <input type="text" v-model="band">
        <table>
            <tbody>
                <!-- 这里实现每3个数字换下一行 -->
                <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: [], //存储输入的数字和符号
                sum: 0, //计算总和
                under: '', //记录每一次的数字和符号，然后放入arr数组，放入一次清除一次
                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: {
                //输入数字
                down(n) {
                    this.band += n
                    this.under += n
 
                },
                //实现删除功能，这里我只能实现整个数字删除
                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));
                    }
 
                },
                //判断是否连续乘除
                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数组
                        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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。