如何用vue做计算器功能
Posted lxystar
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用vue做计算器功能相关的知识，希望对你有一定的参考价值。
大家都知道vue是数据驱动视图的一个javascript框架，彻底解放dom操作，今天我们用vue做一个计算器的功能，会发现vue对于数据操作是非常好用的，下面是小案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="number" v-model.number="num1"/>
<select v-model.number="operater">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="number" v-model.number="num2"/>
<button @click="cal">=</button>
<input type="number" v-model.number="res"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data(){
return{
num1:0,
num2:0,
operater:0,
res:0
}
},
methods:{
cal(){
switch(this.operater){
case 0:
this.res=this.num1+this.num2;
break;
case 1:
this.res=this.num1-this.num2;
break;
case 2:
this.res=this.num1*this.num2;
break;
case 3:
this.res=this.num1/this.num2;
break;
}
}
}
})
</script>
</body>
</html>
以上是关于如何用vue做计算器功能的主要内容，如果未能解决你的问题，请参考以下文章