利用computed计算属性和watch监听属性制作一个简易计算器

最新推荐文章于 2024-05-06 18:46:17 发布

安浅Y

最新推荐文章于 2024-05-06 18:46:17 发布

阅读量226

点赞数 1

分类专栏：前端Vue框架文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_63663070/article/details/129911034

版权

前端Vue框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.准备好Vue框架

2. 写好HTML布局

3.添加computed属性和watch完善计算机功能

1.功能概要：两个输入框内随机输入数字，并且用下拉框选择计算的符号，就可以自动输出计算结果。（输入框内容改变结果也跟着随时改变）

1.准备好Vue框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
        <script src="vue.js"></script>
    </head>
    <style>
        #computer{
            margin: 50px auto;
            width: 500px;
            height: 500px;
        }

    </style>
    <body>
        <div id="computer">
 
        </div>

        <script>
            var vm = new Vue({
                el:"#computer",
                data(){
                    return{
                       
                    }
                }

        </script>

    </body>
</html>

2.编写好简易计算器的布局，并且使用select下拉框来放置计算符号，利用v-model的双向绑定，来绑定输入框，输出框，和计算符号。在imput输入框里使用v-model.number可以把绑定的内容转换为整型（避免计算的时候出现字符串拼接）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
        <script src="vue.js"></script>
    </head>
    <style>
        #computer{
            margin: 50px auto;
            width: 500px;
            height: 500px;
        }

    </style>
    <body>
        <div id="computer">
            <input type="text" placeholder="请输入第一个数" v-model.number="num1">
            <select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
            <input type="text" placeholder="请输入第二个数" v-model.number="num2">
            <h3>结果:{{num1}}+{{num2}}={{result}}</h3>
            <button @Click="terms">计算</button>
        </div>

        <script>
            var vm = new Vue({
                el:"#computer",
                data(){
                    num1:0,
                    num2:0,
                    result:0,
                    opt:"+"
                }
       
        </script>

    </body>
</html>

3.通过按钮的点击事件做一个简易的计算，利用条件语句对计算符号下拉框传过来的值进行匹配，并对两个输入框的内容进行计算处理，最后返回一个结果值打印到输出的位置。

   methods:{
                    terms(){
                        if(this.opt == "+"){
                            this.result=this.num1+this.num2;
                        }else if (this.opt == "-") {
                            this.result=this.num1-this.num2;
                        }else if (this.opt == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                        
                    }

4.为了实现实时处理计算功能，需要加入computed和watch属性。

1.利用watch监听两个输入框和计算符号的改变，并在改变的时候进行计算。

2.利用computed属性来进行计算，可以省去点击按钮才能计算出结果的步骤，并且computed 可以简化代码逻辑更加容易看懂。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
        <script src="vue.js"></script>
    </head>
    <style>
        #computer{
            margin: 50px auto;
            width: 500px;
            height: 500px;
        }

    </style>
    <body>
        <div id="computer">
            <input type="text" placeholder="请输入第一个数" v-model.number="num1">
            <select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
            <input type="text" placeholder="请输入第二个数" v-model.number="num2">
            <h3>结果:{{num1}}+{{num2}}={{result}}</h3>
            <button @Click="terms">计算</button>
        </div>

        <script>
            var vm = new Vue({
                el:"#computer",
                data(){
                    return{
                        num1:0,
                        num2:0,
                        result:0,
                        opt:"+"
                    }
                },
                methods:{
                    terms(){
                        if(this.opt == "+"){
                            this.result=this.num1+this.num2;
                        }else if (this.opt == "-") {
                            this.result=this.num1-this.num2;
                        }else if (this.opt == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                        
                    }
                },
                watch:{
                    opt(newValue,oldValue){
                        if(newValue == "+"){
                            this.result=this.num1+this.num2;
                        }else if (newValue == "-") {
                            this.result=this.num1-this.num2;
                        }else if (newValue == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                    },
                    num1(newValue,oldValue){
                        if(this.opt == "+"){
                            this.result=newValue+this.num2;
                        }else if (this.opt == "-") {
                            this.result=newValue-this.num2;
                        }else if (this.opt == "*") {
                            this.result=newValue*this.num2;
                        }else{
                            this.result=newValue/this.num2;
                        }
                    },
                    num2(newValue,oldValue){
                        if(this.opt == "+"){
                            this.result=this.num1+newValue;
                        }else if (this.opt == "-") {
                            this.result=this.num1-newValue;
                        }else if (this.opt == "*") {
                            this.result=this.num1*newValue;
                        }else{
                            this.result=this.num1/newValue;
                        }
                    }
                },
                computed:{
                    terms(){
                        if(this.opt == "+"){
                            this.result=this.num1+this.num2;
                        }else if (this.opt == "-") {
                            this.result=this.num1-this.num2;
                        }else if (this.opt == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                        
                    }
                }
                

            })
        </script>

    </body>
</html>