关于watch方法
来源：3-23 自由编程
慕仰3297879
2020-05-30 12:55:09
为什么operation放在methods下面不会报错，放在watch下面就会报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1">
<select v-model="value">
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
<input type="text" v-model.number="num2">
<button @click="operation">=</button>
<input type="text" v-model="result">
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue ({
el:"#app",
data:{
num1:"",
value:"+",
num2:"",
result:""
},
watch:{
operation:function(){
switch(this.value) {
case "add":this.result=this.num1+this.num2;
break;
case "sub":this.result=this.num1-this.num2;
break;
case "mul":this.result=this.num1*this.num2;
break;
case "div":this.result=this.num1/this.num2;
break;
}
}
}
})
</script>
</html>
1回答
-
同学你好，watch用来监听数据的改变，当监听的数据值变了，就会执行watch。是不能在watch中定义方法，直接调用的。
建议：在methods中定义方法，在watch中监听，当符号发生改变，就会执行operation方法。例如：
练习的效果图中下拉菜单默认显示+
同学实现的效果中没有
建议添加默认值，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题