Vue.js简易计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/Cheng_May/article/details/81629044

<body>
		<div id="app">
			<h5> {{ msg }}</h5>
			<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"/>
			<input type="button" value="=" v-on:click="calc" />
			<input type="text" v-model="result" />
		</div>
	</body>
	<script >
		var vm = new Vue({
			el:'#app',
			data : {
				msg : '计算机',
			    n1 : 0,
			    n2 : 0,
			    result : 0,
			    opt : '+'
			},
			methods : {
				calc(){// 计算器算数的方法
					// 逻辑：
					switch(this.opt){
							case '+':
							this.result = parseInt(this.n1) + parseInt(this.n2);
						break;
							case '-':
							this.result = parseInt(this.n1) - parseInt(this.n2);
						break;
							case '*':
							this.result = parseInt(this.n1) * parseInt(this.n2);				
						break;
							case '/':
							this.result = parseInt(this.n1) / parseInt(this.n2);
						break;
					}
					//注意： 这是投机取巧的方式
				/*	var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'					
					this.result = eval(codeStr);*/
				}
			}
		});

v-model是vue.js中唯一一个实现双向数据绑定的组件；