技术QQ交流群:294088839
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Watch 选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue Watch 选项</h1>
<hr>
<div id="app">
<p>今日温度:{{wendu}}</p>
<p>穿衣建议:{{chuanyi}}</p>
<button @click="add">添加温度</button>
<button @click="jian">减少温度</button>
</div>
</body>
</html>
<script>
var ListArr=['T恤短袖','夹克长裙','羽绒服']
var app = new Vue({
el:'#app',
data:{
wendu:14,
chuanyi:'夹克长裙'
},
methods:{
add:function(){
this.wendu+=5
},
jian:function(){
this.wendu-=5
}
},
//内部监控
// watch:{
// wendu:function(newVal,oldVal){
// if(newVal>=26){
// this.chuanyi=ListArr[0]
// }else if(newVal<26 && newVal > 0){
// this.chuanyi=ListArr[1]
// }else {
// this.chuanyi=ListArr[2]
// }
// }
// }
})
//外部监控 含$符号的 都是Vue提供的
app.$watch('wendu',function(newVal,oldVal){
if(newVal>=26){
this.chuanyi=ListArr[0]
}else if(newVal<26 && newVal > 0){
this.chuanyi=ListArr[1]
}else {
this.chuanyi=ListArr[2]
}
})
</script>