方法一:
<body>
<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>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建vm实例
var vm = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {//计算器算数方法
calc() {
switch (this.opt) {
case '+':
this.result = parseFloat(this.n1) + parseFloat(this.n2);
break;
case '-':
this.result = parseFloat(this.n1) - parseFloat(this.n2);
break;
case '*':
this.result = parseFloat(this.n1) * parseFloat(this.n2);
break;
case '/':
this.result = parseFloat(this.n1) / parseFloat(this.n2);
break;
}
}
}
});
</script>
</body>
方法二(methods函数代码不同):
calc() {
var codeStr = 'parseFloat(this.n1)' + this.opt+'parseFloat(this.n2)';
this.result = eval(codeStr);
}
注: 这是投机取巧的方式,正式开发中应当尽量避免这种方法的使用。