初步学习Vue

2020/8/20

   今天在公司下午是接触vue，vue生命周期

vue内部指令

vue实现计算器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue2.6.js"></script>

</head>
<body>
<div id="app">
<input type="text" v-model.number="num1">
<input type="text" v-model.number="option">
<input type="text" v-model.number="num2">
<span>
{{num3}}
</span>
</div>

<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
num1:0,
num2:0,
option:"+"
},
computed:{
num3:function () {
let result=0;
switch (this.option) {
case '+':
result=this.num1+this.num2
break;
case '-':
result=this.num1-this.num2
break;
case '*':
result=this.num1*this.num2
break;
case '/':
result=this.num1/this.num2
break;

}
return result
}
}
})
</script>
</body>
</html>

 

posted @ 2020-08-20 21:39  挚终  阅读(160)  评论(0)    收藏  举报