#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>