用Vue的三种方法实现加减乘除运算-前端-CSS教程

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

js插件：vue.js

教程：

首先在工具内引入vue.js

<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
	</head>

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

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

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

第一种***puted方法：

<input type="text" placeholder="输入第一个数" v-model.number="num1">
	        <select v-model="sign">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
	        结果是:{{num1}}{{sign}}{{num2}}={{res}}

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

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

并且写入方法***puted：

<script>
	        const vm = new Vue({
	            el: "#app"，
data: {
	                num1:0,
	                num2:0,
	                sign:"+",
                    res：0
}，
***puted:{
	                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;
	                    }
	                }
	            },
）}
</script>

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

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

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

 <input type="text" placeholder="输入第一个数" v-model.number="num3">
	        <select v-model="sign1">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
	        结果是:{{res}} <br>

<script>
	        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;
	                    }
	                }
	            }
）}
</script>

第三种methods方法：

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

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

 <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
	        <select v-model="sign2"  @change="change">
	            <option>+</option>
	            <option>-</option>
	            <option>*</option>
	            <option>/</option>
	        </select>
	        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
	        结果是:{{num5}}{{sign2}}{{num6}}={{res}}

<script>
	        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);
	                    }
	                }
	            },
）}
</script>

然后运行

效果图

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="输入第一个数" v-model.number="num1">
            <select v-model="sign">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
            结果是:{{num1}}{{sign}}{{num2}}={{res}} <br>
            <input type="text" placeholder="输入第一个数" v-model.number="num3">
            <select v-model="sign1">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
            结果是:{{num3}}{{sign1}}{{num4}}={{res1}} <br>
            <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
            <select v-model="sign2"  @change="change">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
            结果是:{{num5}}{{sign2}}{{num6}}={{res2}}
        </div>
        <script>
            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);
                        }
                    }
                },
                ***puted:{
                    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;
                        }
                    }
                }
            })
        </script>
    </body>

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