<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>watch 选项 监控数据</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>watch 选项 监控数据</h1>
<hr>
<div id="app">
<p>今日温度 ：{{wendu}}° </p>
<p>穿衣建议: {{chuanyi}} </p>
<button @click="add()">升高温度</button> <button @click="reduce()">降低温度</button>
</div>
<script type="text/javascript">
var chuanyiArr = ['T恤短裤','夹克长衫','棉衣羽绒服'];
var myapp = new Vue({
el:'#app',
data:{
wendu:10,
chuanyi:"夹克长衫"
},
methods:{
add:function(){
this.wendu += 5;
},
reduce:function(){
this.wendu -= 5;
}
},
// watch:{
// wendu:function(newvalue,oldvalue){
// if(newvalue >= 26){
// this.chuanyi = chuanyiArr[0];
// }
// else if(newvalue > 0 && newvalue < 26){
// this.chuanyi = chuanyiArr[1];
// }
// else{
// this.chuanyi = chuanyiArr[2];
// }
// }
// }
})
myapp.$watch('wendu',function(newvalue,oldvalue){
if(newvalue >= 26){
this.chuanyi = chuanyiArr[0];
}
else if(newvalue > 0 && newvalue < 26){
this.chuanyi = chuanyiArr[1];
}
else{
this.chuanyi = chuanyiArr[2];
}
});
</script>
</body>
</html>