vue实现简单的计算器功能
更新时间：2022年09月14日 17:26:17 作者：山水不渡我
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue3使用src动态引入本地图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
本篇文章主要介绍了vue结合axios与后端进行ajax交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了使用开源Cesium+Vue实现倾斜摄影三维展示,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
Vue3.2是一款非常流行的JavaScript框架,它让在前端领域开发变得更加的便捷,下面这篇文章主要给大家介绍了关于VUE3.2项目使用Echarts5.4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于uniapp中app与webview通讯的相关资料,这里的通信主要是打包APP端和web-view内嵌网页的双向通信,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected&n
这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下2021-07-07
本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了关于axios配置多个请求地址(打包后可通过配置文件修改)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论