二十三、Watch 選項 監控資料
阿新 • • 發佈：2018-12-18
Watch 選項 監控資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>watch Option 選項</title> </head> <body> <div id="app"> <p>今日溫度：{{wendu}}</p> <p>穿衣建議：{{chuanyi}}</p> <p><button @click="shenggao">升高</button></p> <p><button @click="jiangdi">降低</button></p> </div> <script type="text/javascript"> var suggestion=['短袖','中衣','長衣','羽絨服']; var app=new Vue({ el:'#app', data:{ wendu:20, chuanyi:'大衣' }, methods:{ shenggao:function () { this.wendu+=5; }, jiangdi:function () { this.wendu-=5; } }, watch:{//監控wendu這個值的變化，變化後的值賦予newVal wendu:function(newVal,oldVal) { if (newVal >= 26) { this.chuanyi = suggestion[0]; } else if (newVal < 26 && newVal >= 0) { this.chuanyi = suggestion[1]; }else if (newVal < 0 && newVal >=-15) { this.chuanyi = suggestion[2]; } else { this.chuanyi = suggestion[3]; } } } }) </script> </body> </html>