vue 实现简单的计算器

<body><div id="app"><h5> {{ msg }}</h5><input type="text" v-model="n1" /><select v-model=&quo

做个坏男人

5585人浏览 · 2018-08-13 14:17:13

做个坏男人 · 2018-08-13 14:17:13 发布

<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中唯一一个实现双向数据绑定的组件；

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^