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

1.导入并连接vue.js

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

 2.创建一个div标签，给一个id为app，再写两个input标签，选择类型为text输入框，以方便输入数字，使用select标签和option标签来实现加减乘除符号的选择。

<div id="app">
			<input type="text" v-model="n1">
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2">
			<button @click="fangfa">计算</button>
			<br/>
			<input type="text" v-model="result">
		</div>

3.创建Vue实例

<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*"
			}
		})
	</script>

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

methods:{
					watch1(){
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				},
				watch:{
					n1:function(){
						this.watch1()
					},
					n2:function(){
						this.watch1()
					},
					opt:function(){
						this.watch1()
					}
				},
				created(){
					this.watch1()
				}
			})

运行结果

 

（2）使用methods方法来实现

methods: {
					fangfa() {
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}

运行结果

 

（3）使用computed方法来实现

computed:{
					result(){
						switch (this.opt) {
							case '+':
								return Number(this.n1) + Number(this.n2);
								break;
							case '-':
								return Number(this.n1) - Number(this.n2);
								break;
							case '*':
								return Number(this.n1) * Number(this.n2);
								break;
							case '/':
								return Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}

运行结果

 

 三种方法都需要写在vue实例里边