学习Vue watch时自己挖的一个坑（虽然根因和watch无关
2019-05-29 本文已影响2人
cynthia猫
美滋滋写了一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch</title>
</head>
<body>
<h1>watch</h1>
<hr>
<div id="app">
<p>今日温度，{{temperature}}</p>
<p>穿衣建议，{{suggestion}}</p>
<p><button @click="add">add</button><button @click="minus">minus</button></p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
temperature:14,
suggestion:'ooo'
},
methods:{
add:function(){
this.temperature+=5;
},
minus:function(){
this.temperature-=5;
}
}
})
</script>
</body>
</html>
效果如下：
image.png
然后我想加个功能，根据温度变化，穿衣建议的内容可以自动更新，所以就加上了这段代码：
watch:{
temperature:function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
}
}
当然，也没忘记在script里面，加上提醒文字的数组定义：
var suggestion=['aaa','bbb','ccc'];
然后效果就：
image.png
什么鬼？？？
仔细检查了每一行代码，都没问题啊！
贴上我修改后的代码全文：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch</title>
</head>
<body>
<h1>watch</h1>
<hr>
<div id="app">
<p>今日温度，{{temperature}}</p>
<p>穿衣建议，{{suggestion}}</p>
<p><button @click="add">add</button><button @click="minus">minus</button></p>
</div>
<script type="text/javascript">
var suggestion=['aaa','bbb','ccc'];
var app=new Vue({
el:'#app',
data:{
temperature:14,
suggestion:'ooo'
},
methods:{
add:function(){
this.temperature+=5;
},
minus:function(){
this.temperature-=5;
}
},
watch:{
temperature:function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
}
}
}),
</script>
</body>
</html>
看到端倪了么？倒数第四行多了个逗号,
把}),改成})之后，问题解决。。。
我是啥时候多敲了一个逗号的。。。
