用Vue的三种方法实现加减乘除运算

js插件：vue.js

教程：

首先在工具内引入vue.js

然后在body里面创建一个div并设置id，我这里给id命名为”app”

在id命名为”app”的div内使用input标签和select标签来设置运算框

然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算

第一种computed方法：

	        
	            +
	            -
	            *
	            /
	        
	         

	        结果是:{{num1}}{{sign}}{{num2}}={{res}}

接下来我们在id为”app”的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为”app”的div

然后为每个input标签和select标签设置对应的data属性

并且写入方法computed：

	        const vm = new Vue({
	            el: "#app"，
data: {
	                num1:0,
	                num2:0,
	                sign:"+",
                    res：0
}，
computed:{
	                res(){
	                    if(this.sign === "+") {
	                        return this.num1 + this.num2;
	                    } else if(this.sign === "-") {
	                        return this.num1 - this.num2;
	                    } else if(this.sign === "*") {
	                        return this.num1 * this.num2;
	                    } else if(this.sign === "/"){
	                        return this.num1 / this.num2;
	                    }
	                }
	            },
）}

第二种 watch(侦听器)方法：

然后在body里面创建一个div并设置id，我这里给id命名为”app”

在id命名为”app”的div内使用input标签和select标签来设置运算框

 
	        
	            +
	            -
	            *
	            /
	        
	         

	        结果是:{{res}} 

	        const vm = new Vue({
	            el: "#app"，
data: {
	                num1:0,
	                num2:0,
	                sign:"+",
                    res：0
}， watch:{
	                num1(val){
	                    if(this.sign === "+") {
	                        this.res = val + this.num2;
	                    } else if(this.sign === "-") {
	                        this.res = val - this.num2;
	                    } else if(this.sign1 === "*") {
	                        this.res = val * this.num2;
	                    } else if(this.sign1 === "/"){
	                        this.res = val / this.num2;
	                    }
	                },
	                num2(val){
	                    if(this.sign === "+") {
	                        this.res = this.num1 + val;
	                    } else if(this.sign1 === "-") {
	                        this.res = this.num1 - val;
	                    } else if(this.sign1 === "*") {
	                        this.res = this.num1 * val;
	                    } else if(this.sign1 === "/"){
	                        this.res = this.num1 / val;
	                    }
	                },
	                sign(val){
	                    if(val === "+") {
	                        this.res = this.num1 + this.num2;
	                    } else if(val === "-") {
	                        this.res = this.num1 - this.num2;
	                    } else if(val === "*") {
	                        this.res = this.num1 * this.num2;
	                    } else if(val === "/"){
	                        this.res = this.num1 / this.num2;
	                    }
	                }
	            }
）}

第三种methods方法：

 在body里面创建一个div并设置id，我这里给id命名为”app”

在id命名为”app”的div内使用input标签和select标签来设置运算框

 
	        
	            +
	            -
	            *
	            /
	        
	         

	        结果是:{{num5}}{{sign2}}{{num6}}={{res}}

	        const vm = new Vue({
	            el: "#app"，
data: {
	                num1:0,
	                num2:0,
	                sign:"+",
                    res：0
}，methods:{
	                change(){
	                    if(this.sign2 === "+") {
	                        this.res = this.num1 + this.num2;
	                    } else if(this.sign === "-") {
	                        this.res = this.num1 - this.num2;
	                    } else if(this.sign === "*") {
	                        this.res = this.num1 * this.num2;
	                    } else if(this.sign === "/"){
	                        this.res = parseInt(this.num1) / parseInt(this.num2);
	                    }
	                }
	            },
）}

然后运行

效果图

 源代码：

    
        
        
    
    
        
            
            
                +
                -
                *
                /
            
             

            结果是:{{num1}}{{sign}}{{num2}}={{res}} 

            
            
                +
                -
                *
                /
            
             

            结果是:{{num3}}{{sign1}}{{num4}}={{res1}} 

            
            
                +
                -
                *
                /
            
             

            结果是:{{num5}}{{sign2}}{{num6}}={{res2}}
        
        
            const vm = new Vue({
                el: "#app",
                data: {
                    num1:0,
                    num2:0,
                    sign:"+",
                    res:"0",
                    num3:0,
                    num4:0,
                    sign1:"+",
                    res1:"0",
                    
                    num5:0,
                    num6:0,
                    sign2:"+",
                    res2:"0"
                },
                methods:{
                    change(){
                        if(this.sign2 === "+") {
                            this.res2 = this.num5 + this.num6;
                        } else if(this.sign2 === "-") {
                            this.res2 = this.num5 - this.num6;
                        } else if(this.sign2 === "*") {
                            this.res2 = this.num5 * this.num6;
                        } else if(this.sign2 === "/"){
                            this.res2 = parseInt(this.num5) / parseInt(this.num6);
                        }
                    }
                },
                computed:{
                    res(){
                        if(this.sign === "+") {
                            return this.num1 + this.num2;
                        } else if(this.sign === "-") {
                            return this.num1 - this.num2;
                        } else if(this.sign === "*") {
                            return this.num1 * this.num2;
                        } else if(this.sign === "/"){
                            return this.num1 / this.num2;
                        }
                    }
                },
                watch:{
                    num3(val){
                        if(this.sign1 === "+") {
                            this.res1 = val + this.num4;
                        } else if(this.sign1 === "-") {
                            this.res1 = val - this.num4;
                        } else if(this.sign1 === "*") {
                            this.res1 = val * this.num4;
                        } else if(this.sign1 === "/"){
                            this.res1 = val / this.num4;
                        }
                    },
                    num4(val){
                        if(this.sign1 === "+") {
                            this.res1 = this.num3 + val;
                        } else if(this.sign1 === "-") {
                            this.res1 = this.num3 - val;
                        } else if(this.sign1 === "*") {
                            this.res1 = this.num3 * val;
                        } else if(this.sign1 === "/"){
                            this.res1 = this.num3 / val;
                        }
                    },
                    sign1(val){
                        if(val === "+") {
                            this.res1 = this.num3 + this.num4;
                        } else if(val === "-") {
                            this.res1 = this.num3 - this.num4;
                        } else if(val === "*") {
                            this.res1 = this.num3 * this.num4;
                        } else if(val === "/"){
                            this.res1 = this.num3 / this.num4;
                        }
                    }
                }
            })
        
    


————————————————
版权声明：本文为CSDN博主「hu15137376135」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hu15137376135/article/details/129914536