大家都知道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>
原文地址：https://www.cnblogs.com/lxystar/p/10641723.html
时间： 2024-11-14 12:20:17