#vue# 实现计算器功能

需求：用vue实现一个简易的计算器

效果图：

思路：

（1）首先将这个简易的计算器排版出来，主要是用到input、button、 select option（下拉菜单）

这些标签，再进行写相应的css样式（不细讲）

（2）我们需要获取到每一个方框以及下拉菜单里的数值，所以我们需要用v-model 进行双向绑定

（3）接下来就是触发事件@click="事件函数"了，当我们输入数字的时候，点击等号方框，运算框就有结果，那么就需要在等号方框设置点击事件，让运算框来接收结果

（4）设置点击事件的时候，我们需要进行传参，那是传什么参数呢？我们可以看出，当我们的下拉菜单里面的运算符发生变化时，结果就会发生变化，那我们只需要将下拉菜单的值传到点击事件里面就可以了

（5）然后，我们使用 switch函数进行判断，通过传入的下拉菜单的值，来判断不同的case，返回不同的值就可以了

注意：需使用parseInt（）

demo代码部分

<template><div class="number"><input type="text" v-model="num1" /> //第一个运算框<select v-model="conunt"> //加减乘除下拉菜单,设置加号为默认符号<option>+</option>  <option>-</option><option>*</option><option>/</option></select><input type="text" v-model="num2"/> //第二个运算框<button  @click="getcomper">=</button> //等号框，绑定点击事件<input type="text" v-model="result"/> //结果框</div>
</template>
<script>data() {return {num1:'',num2:'',result:'',conunt:'+'}},methods: {getcomper() {switch (this.conunt) {case '+':this.result = parseInt(this.num1) + parseInt(this.num2)break;case '-':this.result = parseInt(this.num1) - parseInt(this.num2)break;case '*' :this.result = parseInt(this.num1) * parseInt(this.num2)break;case '/':this.result = parseInt(this.num1) / parseInt(this.num2)break;default:this.result = 0}}  //parseInt是为了拿到整数}</script><style scoped>
.number {display: flex;width: 500px;margin: 100px auto;
}input {width: 100px;height: 50px;margin-right: 20px;
}button {width: 50px;height: 50px;font-size: 20px;margin-right: 20px;}
select {width: 50px;height: 50px;background-color: #3BB9FF;margin-right: 20px;font-size: 18px;
}</style>

#vue# 实现计算器功能相关推荐

html科学计算器,vue.js实现的经典计算器/科学计算器功能示例
本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: Show Advanced Mode ⚈ Show Basic Mode ⚆ 7 8 ...
android实现计算器功能吗,利用Android实现一个简单的计算器功能
利用Android实现一个简单的计算器功能发布时间:2020-11-20 16:25:01 来源:亿速云阅读:90 作者:Leah 今天就跟大家聊聊有关利用Android实现一个简单的计算器功能, ...
python表达式计算器_Python正则表达式实现简易计算器功能示例
本文实例讲述了Python正则表达式实现简易计算器功能.分享给大家供大家参考,具体如下: 需求:使用正则表达式完成一个简易计算器. 功能:能够计算简单的表达式. 如:1*2*((1+2)/(2+3)+ ...
使用jquery实现的计算器功能
晚上做了一个jQuery的项目,使用jQuery实现了一个简单的计算器功能,可以实现连加,连减,混合计算,括号内优先计算,代码如下: css部分: 1 <style> 2 .main{ 3 ...
python实现简单计算器功能键介绍_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...
java swing实现计算器_Java swing实现的计算器功能完整实例
本文实例讲述了Java swing实现的计算器功能.分享给大家供大家参考,具体如下: package awtDemo; import java.awt.*; import java.awt.event ...
python调用计算器卡死_Python+tkinter使用40行代码实现计算器功能
本文实例为大家分享了40行Python代码实现计算器功能,供大家参考,具体内容如下偶尔用脚本写点东西也是不错的. 效果图代码 from tkinter import * reset=True de ...
formula 返回list_python正则实现计算器功能
本文实例为大家分享了python正则实现计算器功能的具体代码,供大家参考,具体内容如下 # -*- coding: utf-8 -*- # Author :Gogh # @Time :2017/12/ ...
java web编写计算器_javaWeb 使用 jsp 和 javaBean 实现计算器功能
jsp 和 javaBean 实现计算器功能 try { calculator.calculate(); } catch (Exception e) { out.write(e.getMessage( ...

#vue# 实现计算器功能

#vue# 实现计算器功能相关推荐

最新文章

热门文章