使用Vue三种方法实现计算器

最新推荐文章于 2024-04-19 16:48:39 发布

RXYX

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量335

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_77077512/article/details/129915037

版权

1.引入vue.js

<script type="text/javascript" src="js/vue.js"></script>

2.定义一个id为app的标签

<div id="app">

3.创建vue实例化对象

<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				result:""

4.用select和option标签实现加减乘除四个选项

<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
</select>

三种方法实现：

（1）methods方法

methods:{
        change(){
                if(this.opt=="+"){
                        this.result = this.number1+this.number2;
                }
                if(this.opt=="-"){
                        this.result = this.number1-this.number2;
                }
                if(this.opt=="*"){
                        this.result = this.number1*this.number2;
                }
                if(this.opt=="/"){
                        this.result = this.number1/this.number2;
                }
        }
 }

（2）computed方法

computed:{
	                res(){
	                    if(this.lr === "+") {
	                        return this.num1 + this.num2;
	                    } else if(this.lr === "-") {
	                        return this.num1 - this.num2;
	                    } else if(this.lr === "*") {
	                        return this.num1 * this.num2;
	                    } else if(this.lr === "/"){
	                        return this.num1 / this.num2;
	                    }
	                }
	            },

(3)watch侦听器方法

watch:{
	                number1(val){
	                    if(this.lr1 === "+") {
	                        this.res1 = val + this.num4;
	                    } else if(this.lr1 === "-") {
	                        this.res1 = val - this.num4;
	                    } else if(this.lr1 === "*") {
	                        this.res1 = val * this.num4;
	                    } else if(this.lr1 === "/"){
	                        this.res1 = val / this.num4;
	                    }
	                },
	                num4(val){
	                    if(this.lr1 === "+") {
	                        this.res1 = this.num3 + val;
	                    } else if(this.lr1 === "-") {
	                        this.res1 = this.num3 - val;
	                    } else if(this.lr1 === "*") {
	                        this.res1 = this.num3 * val;
	                    } else if(this.lr1 === "/"){
	                        this.res1 = this.num3 / val;
	                    }
	                },
	                lr1(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;
	                    }
	                }
	            }

效果图