老师,我感觉watch没啥用,顺便检查下代码,谢谢

来源:3-23 自由编程

twtszz

2020-08-13 23:54:40

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id='div'>

<input type="text" v-model.number="value1">

<select v-model="value" @click="resultFn">

<option value="add">+</option>

<option value="sub">-</option>

<option value="mul">*</option>

<option value="divi">/</option>

</select>

<input type="text" v-model.number="value2"/>

<button @click='resultFn(value1,value2)'>=</button>

<input type="text" v-model="result">

</div>

<script>

var vm = new Vue({

el:'#div',

data:{

value1:'',

value2:'',

result:'',

value:'add'

},

methods:{

resultFn:function(num1,num2){

switch(this.value){

case 'add': this.result = this.value1 + this.value2;break;

case 'sub': this.result = this.value1 - this.value2;break;

case 'mul': this.result = this.value1 * this.value2;break;

case 'divi': this.result = this.value1 / this.value2;break;

}

},

watch:{

value:function(){

this.resultFn();

}

}

}

})

</script>

</body>

</html>


写回答

1回答

好帮手慕久久

2020-08-14

同学你好,代码中有如下问题:

watch方法,是vue自带的方法,不能写在methods中(写在methods中会无效),如下:

http://img.mukewang.com/climg/5f35f668098949b908650614.jpg

修改后,select上的方法就可以不用写了:

http://img.mukewang.com/climg/5f35f639095d15b105530193.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

1

0 学习 · 10739 问题

查看课程