如何接受Data中计算地结果？
来源：2-11 自由编程
残泪
2021-08-23 10:05:41
result 用插值表达式或者v-text、v-html绑定在span上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="Vue.js"></script>
</head>
<body>
<div id ="app">
<input type="text" v-model= "num1" >
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">÷</option>
</select>
<input type="text" v-model= "num2" >
<button @click="cal">=</button>
<span>{{result}}</span>
</div>
<script>
const app = {
data(){
return {
cal () {
switch (this.opt) {
case '+':
this.result = parseFloat(this.num1) + parseFloat(this.num2);
break;
case '-':
this.result = parseFloat(this.num1) - parseFloat(this.num2);
break;
case '*':
this.result = parseFloat(this.num1) * parseFloat(this.num2);
break;
case '/':
this.result = parseFloat(this.num1) / parseFloat(this.num2);
break;
}
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
写回答
1回答
-
好帮手慕阿满
2021-08-23
同学你好，可以根据实现步骤，具体完成，如：
1、在data中定义四个变量
定义变量代码参考：
2、书写html结构，并完成绑定工作。
3、在methods中完成cal()函数。
具体参考如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <script src=".\lib\Vue.js"></script> </head> <body> <div id ="app"> <input type="text" v-model= "num1" > <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">x</option> <option value="/">÷</option> </select> <input type="text" v-model= "num2" > <button @click="cal">=</button> <span>{{result}}</span> </div> <script> const app = { data(){ return{ num1:0, num2:0, opt:"+", result:0 } }, methods:{ cal() { switch (this.opt) { case '+': this.result = parseFloat(this.num1) + parseFloat(this.num2); break; case '-': this.result = parseFloat(this.num1) - parseFloat(this.num2); break; case '*': this.result = parseFloat(this.num1) * parseFloat(this.num2); break; case '/': this.result = parseFloat(this.num1) / parseFloat(this.num2); break; } } } } Vue.createApp(app).mount('#app'); </script> </body> </html>祝学习愉快~
1
相似问题