用Vue做一个简易计算器

实现效果如图

 HTML部分实现较容易，由文本框、下拉框、按钮组成

主要是用v-model实现model和表单元素的双向数据绑定

<div id="app">
	<input type="text" placeholder="请输入数字" v-model.number="number1" />
	<select v-model="pwd">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input type="text" placeholder="请输入数字" v-model.number="number2" />
	<button @click="clt()">等于</button>
	<input type="text" v-model="result"/>
	<br />
</div>

用computed计算属性实现计算效果

<script>
	var vm = new Vue({
		el:"#app",
		data:{
			number1:0,
			number2:0,
			pwd:"+",
			result:0
		},
		computed:{
			clt(){
				switch(this.pwd){
					case '+':
						this.result = this.number1+this.number2;
						break;
					case '-':
						this.result = this.number1-this.number2;
						break;
					case '*':
						this.result = this.number1*this.number2;
						break;
					case '/':
						this.result = this.number1/this.number2;
						break;
				}
			}
		}
	});
</script>

用methods方法实现计算效果

<script>
	new Vue({
		el:"#app",
		data:{
			number1:'',
			number2:'',
			pwd:'请选择符号',
			result:''
		},
		methods:{
			clt(){
				switch(this.pwd){
					case '+':
						this.result = this.number1+this.number2;
						break;
					case '-':
						this.result = this.number1-this.number2;
						break;
					case '*':
						this.result = this.number1*this.number2;
						break;
					case '/':
						this.result = this.number1/this.number2;
						break;
				}
			}
		}
	});
</script>