vue计算器功能
山水不渡我 人气:01.功能
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>
加载全部内容