【Vue实现简单的计算器】

最新推荐文章于 2023-04-03 13:24:53 发布

m0_72471172

最新推荐文章于 2023-04-03 13:24:53 发布

阅读量144

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_72471172/article/details/129701073

版权

一、项目分享
使用三种方法实现一个简单的计算器。

二、实战步骤
第一种：使用函数实现
第一步：引入vue.js

第二步：在body中建立一个被vue控制的div

第三步：创建Vue对象

代码实现：

<div id="app">
            <!-- 第一种 -->
            <input type="text" v-model.number="number1" placeholder="请输入第一个数字"/>
            <select v-model="opt1">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number2" placeholder="请输入第二个数字">
            <br>
            {{number1}}{{opt1}}{{number2}}={{result}}
            <button type="button" @click="equal">计算</button><br>
<div/>
<script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    number1:0,
                    number2:0,
                    result:0,
                    opt1:"+"
                },
                methods:{
                    equal:function(){
                        if(this.opt1=="+"){
                            this.result = this.number1 + this.number2
                        }
                        else if(this.opt1=="-"){
                            this.result = this.number1 - this.number2
                        }
                        else if(this.opt1=="*"){
                            this.result = this.number1 * this.number2
                        }
                        else if(this.opt1=="/"){
                            this.result = this.number1 / this.number2
                        }
                    }
                }
<script/>

第二种：监听器方法
监听输入的两个数字，第一个数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的输出。

代码实现：

<!-- 第二种 -->
<input type="text" v-model.number="number3" placeholder="请输入第一个数字"/>
<select v-model="opt2">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
</select>
<input type="text" v-model.number="number4" placeholder="请输入第二个数字"/><br>
{{number3}}{{opt2}}{{number4}}={{b}}<br>
watch:{                
                    number3(val){
                        this.b = val+this.number4;
                    },
                    number4(val){
                        if(this.opt2=="+"){
                            this.b = this.number3 + val
                        }
                        else if(this.opt2=="-"){
                            this.b = this.number3 - val 
                        }
                        else if(this.opt2=="*"){
                            this.b = this.number3 * val 
                        }
                        else if(this.opt2=="/"){
                            this.b = this.number3 / val 
                        }
     
                    }
                }

第三种：使用计算属性
在计算属性中定义一个函数a,直接调用方法a计算

代码实现：

<!-- 第三种 -->
            <input type="text" v-model.number="number5" placeholder="请输入第一个数字"/>
            <select v-model="opt3">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number6" placeholder="请输入第二个数字"/>        <br>
            {{number5}}{{opt3}}{{number6}}={{a}} 
 computed:{
                    a(){
                        if(this.opt3=="+"){
                            return this.number5 + this.number6 
                        }
                        else if(this.opt3=="-"){
                            return this.number5 - this.number6
                        }
                        else if(this.opt3=="*"){
                            return this.number5 * this.number6 
                        }
                        else if(this.opt3=="/"){
                            return this.result = this.number5 / this.number6
                        }
     
                    }
                }

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
        <div id="app">
            <!-- 第一种 -->
            <input type="text" v-model.number="number1" placeholder="请输入第一个数字"/>
            <select v-model="opt1">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number2" placeholder="请输入第二个数字">
            <br>
            {{number1}}{{opt1}}{{number2}}={{result}}
            <button type="button" @click="equal">计算</button><br>
            <!-- 第二种 -->
            <input type="text" v-model.number="number3" placeholder="请输入第一个数字"/>
            <select v-model="opt2">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number4" placeholder="请输入第二个数字"/><br>
            {{number3}}{{opt2}}{{number4}}={{b}}<br>
            <!-- 第三种 -->
            <input type="text" v-model.number="number5" placeholder="请输入第一个数字"/>
            <select v-model="opt3">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number6" placeholder="请输入第二个数字"/><br>
            {{number5}}{{opt3}}{{number6}}={{a}}
        </div>
    </body>
    <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    number1:0,
                    number2:0,
                    number3:0,
                    number4:0,
                    number5:0,
                    number6:0,
                    result:0,
                    b:0,
                    opt1:"+",
                    opt2:"+",
                    opt3:"+"
                },
                methods:{
                    equal:function(){
                        if(this.opt1=="+"){
                            this.result = this.number1 + this.number2
                        }
                        else if(this.opt1=="-"){
                            this.result = this.number1 - this.number2
                        }
                        else if(this.opt1=="*"){
                            this.result = this.number1 * this.number2
                        }
                        else if(this.opt1=="/"){
                            this.result = this.number1 / this.number2
                        }
                    }
                },
                watch:{                
                    number3(val){
                        this.b = val+this.number4;
                    },
                    number4(val){
                        if(this.opt2=="+"){
                            this.b = this.number3 + val
                        }
                        else if(this.opt2=="-"){
                            this.b = this.number3 - val 
                        }
                        else if(this.opt2=="*"){
                            this.b = this.number3 * val 
                        }
                        else if(this.opt2=="/"){
                            this.b = this.number3 / val 
                        }
     
                    }
                },
                computed:{
                    a(){
                        if(this.opt3=="+"){
                            return this.number5 + this.number6 
                        }
                        else if(this.opt3=="-"){
                            return this.number5 - this.number6
                        }
                        else if(this.opt3=="*"){
                            return this.number5 * this.number6 
                        }
                        else if(this.opt3=="/"){
                            return this.result = this.number5 / this.number6
                        }
     
                    }
                }
            })
        </script>
</html>

四、运行效果

m0_72471172

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue实现简单的计算器】

监听输入的两个数字，第一个数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的输出。第二步：在body中建立一个被vue控制的div。在计算属性中定义一个函数a,直接调用方法a计算。第一步：引入vue.js。第三步：创建Vue对象。使用三种方法实现一个简单的计算器。第一种：使用函数实现。第三种：使用计算属性。
复制链接

扫一扫