使用三种方法来实现简单的计算器

1.导入并连接vue.js

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

2.创建一个div标签，给一个id为app

然后再写两个input标签，选择类型为text输入框，以方便输入数字

使用select标签和option标签来实现加减乘除符号的选择

<div id="app">
    <!-- 输入的第一个数，placeholder属性为提示文本，.number的作用为将输入的字符串转换成数字以方便进行计算 -->
	<input type="text" placeholder="请输入第一个数" v-model.number="number1" @change="change">
	<!-- select标签为下拉列表，option标签中为选项 -->
	<select v-model="opt" @change="change">
		<option>+</option>
		<option>-</option>
		<option>*</option>
		<option>/</option>
	</select>
	<!-- 输入的第二个数 -->
	<input type="text" placeholder="请输入第二个数" v-model.number="number2" @change="change"><br/>
	结果:{{number1}}{{opt}}{{number2}}={{m1}}
</div>

3.创建Vue实例

<script>
	// 实例化Vue对象
	var vm = new Vue({
	    // el为作用范围
		el:"#app",
		data:{
			// 输入的第一个数
			number1:0,
			// 输入的第一个数
			number2:0,
			// 选择的计算符号
			opt:"+",
			// 放置计算结果
			result:""
		}
	})
</script>

（1）使用computed方法来实现

computed:{
	m1:function(){
		if(this.opt=="+"){
			return this.number1+this.number2;
		}
		if(this.opt=="-"){
			return this.number1-this.number2;
		}
		if(this.opt=="*"){
			return this.number1*this.number2;
		}
		if(this.opt=="/"){
			return this.number1/this.number2;
		}
	}
}

（2）使用methods方法来实现（使用此方法要为两个输入框和下拉列表框都写上@change=“change”事件）

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;
		}
	}
}

（3）使用watch侦听器的方法来实现

watch:{
	number1(val){
		if(opt == "+"){
			this.result = val + this.number2;
		}
		if(opt == "-"){
			this.result = val - this.number2;
		}
		if(opt == "*"){
			this.result = val * this.number2;
		}
		if(opt == "/"){
			this.result = val / this.number2;
		}
	},
	number2(val){
		if(this.opt == "+"){
			this.result =this.number1 + val;
		}
		if(this.opt == "-"){
			this.result =this.number1 - val;
		}
		if(this.opt == "*"){
			this.result =this.number1 * val;
		}
		if(this.opt == "/"){
			this.result =this.number1 / val;
		}
	},
	opt(val){
		if(val == "+"){
			this.result =this.number1 + this.number2;
		}
		if(val == "-"){
			this.result =this.number1 - this.number2;
		}
		if(val == "*"){
			this.result =this.number1 * this.number2;
		}
		if(val == "/"){
			this.result =this.number1 / this.number2;
		}
	}
}

4.让我们来看看运行效果吧

 注:这三种方法需要写在vue实例里边，运行出的效果都一样只是使用的方法不一样，重点在于对于三种方法的掌握和灵活运用，通过if语句对用户选择符号的判断来实现相应的加减乘除运算。