<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>计算器</title>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
第一个数:<input type="text" v-model="num1"/>
</div>
<div>
第二个数:<input type="text" v-model="num2"/>
</div>
<button v-on:click="add">加法</button>
<button v-on:click="subtraction">减法</button>
<button v-on:click="multiplication">乘法</button>
<button v-on:click="division">除法</button>
<div>
结果：<input type="text" v-model="result" />
</div>
</div>
</body>
<script>
var mv=new Vue({
el:"#app",
data:{
num1:"",
num2:"",
result:"",
},
methods:{
add:function(){
this.result=parseInt(this.num1)+parseInt(this.num2);
},
subtraction:function(){
this.result=parseInt(this.num1)-parseInt(this.num2);
},
multiplication:function(){
this.result=parseInt(this.num1)*parseInt(this.num2);
},
division:function(){
if (this.num2==0) {
alert("第二位数不能为0")
} else{
try{
this.result=parseInt(this.num1)/parseInt(this.num2);
}catch(e){
alert("运算格式不对")
}
}
}
}
})
</script>
</html>
没什么技术含量 跟着敲的
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
