我是使用引用vue.js的方式使用vue的,只有一个页面,但是却报了错了,网上的都是大项目出的问题,所以记录一下
错误:
我的代码:
new Vue({
el:'#app',
data:{
// 温度
count:15,
// 穿什么
a:'111',
},
watch:{
a:{
handle(){
console.log('12345')
if(this.count>=20) return "短袖";
if(this.count>10&&this.count<20) return "长袖";
if(this.count<=10) return "毛衣";
},
immediate:true,
},
}
})
修改之后不报错的代码:
new Vue({
el:'#app',
data:{
count:15,
a:''
// arr:["短袖",'长袖','毛衣'],
},
watch:{
'count':{
handler(newVal){
if(newVal>=20) return this.a="短袖";
if(newVal>10&&newVal<20) return this.a="长袖";
if(newVal<=10) return this.a="毛衣";
},
immediate:true,
},
}
})
原因:
- 监听错误。想修改a的值,所以就监听a了,实际上应该监听count,然后根据count改变a的值
- 要用 handler 而不可以自己定义一个名字 handle (这就是报错原因)