Vue——简单计算器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>&l
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h1>简单计算机</h1>
第一个数：<input type="text" v-model='num1' placeholder="请输入第一个数" /><br />
第二个数：<input type="text" v-model='num2'placeholder="请输入第二个数" /><br />
<input type="button" @click='a' value="加法计算">
<input type="button" @click='b' value="减法计算">
<input type="button" @click='c' value="乘法计算">
<input type="button" @click='d' value="除法计算">
<div>计算机的结果：{{res}}</div>
</div>
<script>
let options = {
el: "#app",
data:{
num1:'',
num2:'',
res:''
},
methods:{
a:function(){
this.res=Number(this.num1)+Number(this.num2);
console.log(this.res);
return this.res;
},
b:function(){
this.res=Number(this.num1)-Number(this.num2);
console.log(this.res);
return this.res;
},
c:function(){
this.res=Number(this.num1)*Number(this.num2);
console.log(this.res);
return this.res;
},
d:function(){
this.res=(Number(this.num1)/Number(this.num2)).toFixed(2);
console.log(this.res);
return this.res;
}
}
};
var vm = new Vue(options);
</script>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)