VUE數據監控方法，watch

數據變化的監控經常使用，例如學生考試成績的監控，有時候我們不想以分數的形式體驗，而是以一個比較模糊的形式來表示學生的考試結果。比如，根據考試分數來提示成績的，優、良、中、差。

這裡我們定義成績在：

5分 = 優

3-4分 = 良

2分 = 中

1分 = 差

我們先寫一個輸入框，在這個輸入框裡輸入分數，然後在輸入框的下邊來提示出優、良、中、差。

<code>HTML

  
{{ msg }}

    

       
      
    
     
    
{{gradeClass}}
  /<code>

然後我們來添加Watch方法：

<code>JS
export default {
  name: 'watch',
  data () {
    return {
      msg: '我是 watch 監控數據',
      grade: '',
      gradeClass: ''
    }
  },
  watch: {
    // 對grade進行監視
    grade: function(newVal, oldVal){
      // watch有兩個參數，第一個新的值，第二個是上一次的值
      // 我們可以打印看一下
      console.log(newVal, oldVal)
    }
  }
}/<code>

結果：

我們可以看到，第一個值是現在輸入的值，第二值是上一我輸入的值。

好，我們就可以使用這個第一個參數來判斷分數的等級。

我們可以用Switch方法來簡單的寫一下示例（這裡沒有做嚴謹邏輯判斷，只是做為一個簡單的示例）：

<code>JS
export default {
  name: 'watch',
  data () {
    return {
      msg: '我是 watch 監控數據',
      grade: '',
      gradeClass: ''
    }
  },
  watch: {
    // 對grade進行監視
    grade: function(newVal, oldVal){
      // watch有兩個參數，第一個新的值，第二個是上一次的值
      // 我們可以打印看一下
      console.log(newVal, oldVal)
      switch(parseInt(newVal)){
        case 1:
          this.gradeClass = '差';
          break;
        case 2:
          this.gradeClass = '中';
          break;
        case 5:
          this.gradeClass = '優';
          break;
        default:
          this.gradeClass = '良';
      };
    }
  }
}/<code>

好，以上就是Vue watch的使用。