用v-modle做一个简单的计算器

效果如下：

代码如下（代码里没有引入vue库，注意）：

<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">
		<input type="button" value="=" @click = "calc">
		<input type="text" v-model = "result">
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				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;
					}
				}
			}
		})
	</script>

其实还有一个简单的方法

//这里只改动methods部分
methods: {
	calc() {
		var codeStr = 'parseInt(this.n1)' +this.opt+'parseInt(this.n2)'
		this.result = eval(codeStr)
		//eval()可以计算某个字符串，并执行其中的JavaScript代码
	}
}