老师检查一下
来源：3-23 自由编程
lcyjerry
2020-05-19 15:36:21
<!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">
<input v-model.number="first" type="text" />
<select @change="change">
<option v-for="(item, index) in list" >{{item}}</option>
</select>
<input v-model.number="second" type="text" />
<button @click="cal">=</button>
<input v-model="result" type="text" />
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:['+','-','*','/'],
first:'',
second:'',
result:'',
index:0,
},
methods:{
cal:function(){
switch(this.index){
case 0:
this.result = this.first + this.second
break;
case 1:
this.result = this.first - this.second
break;
case 2:
this.result = this.first * this.second
break;
case 3:
this.result = this.first / this.second
break;
}
},
change:function(e){
this.index = e.target.selectedIndex;
},
},
watch:{
first:function(){
this.cal();
},
second:function(){
this.cal();
},
index:function(){
this.cal();
}
},
})
</script>
</body>
</html>
2回答
-
好帮手慕码
2020-05-19
同学你好，效果实现的挺好的，无需优化了。继续加油，祝学习愉快~
0 -
好帮手慕码
2020-05-19
同学你好，代码效果正确。继续加油，祝学习愉快~
0h020-05-19
相似问题