这篇博客介绍了两种使用Vue.js创建简单计算器的方法。第一种通过switch语句进行计算，第二种利用eval函数动态执行计算表达式。这两种方法展示了Vue如何结合HTML和JavaScript处理用户输入并进行动态计算。
第一种方法:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<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">
<!-- 点击等号算出结果 -->
<button @click="calc">=</button>
<!-- 最终的计算结果 -->
<input type="text" v-model="result">
</div>
<script>
new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2)
break;
case '-':
this.result = Number(this.n1) - Number(this.n2)
break;
case '*':
this.result = Number(this.n1) * Number(this.n2)
break;
case '/':
this.result = Number(this.n1) / Number(this.n2)
break;
}
}
}
})
</script>
第二种方法:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<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">
<!-- 点击等号算出结果 -->
<button @click="calc">=</button>
<!-- 最终的计算结果 -->
<input type="text" v-model="result">
</div>
new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
calc(){
var codestr='Number(this.n1) '+this.opt+ 'Number(this.n2)'
this.result=eval(codestr)
}
}
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
