如何用Vue轻松实现基础计算器功能？

本文共计976个文字，预计阅读时间需要4分钟。

原文示例

原文：本文实例分享了如何使用Vue实现简单计算器的整体代码，供大家参考。具体内容如下：+ 1. 功能+ 1) 实现加减乘除（包含小数）功能+ 2) 实现清除退出格（3）+ 3) 实现内容重置功能

改写后：

本文提供Vue实现简单计算器的核心代码，供大家学习。主要包含：

1.功能

1) 实现加减乘除运算（含小数） 2) 清除退出 3) 重置内容

本文实例为大家分享了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>

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