关于watch方法
为什么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>
正在回答
同学你好，watch用来监听数据的改变，当监听的数据值变了，就会执行watch。是不能在watch中定义方法，直接调用的。
建议：在methods中定义方法，在watch中监听，当符号发生改变，就会执行operation方法。例如：
练习的效果图中下拉菜单默认显示+
同学实现的效果中没有
建议添加默认值，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星