計算資料屬性(官網稱呼),又叫動態資料繫結(相對於靜態資料繫結而言).可以在dom渲染之前修改資料.按照官網的解釋,計算資料屬性是為了簡化模板的運算邏輯.從而利於維護.把複雜的邏輯繫結在computed裡.當然,利用它也可以做很多事情.比如單選,全選的實現.今天簡單實現一下表單的校驗.原理邏輯都差不多.

        初學者需注意: 

                    1.計算屬性不支援非同步.如果需要非同步,請用watch方法.

                    2.另外,到底是用computed還是watch.官網的建議是能用computed儘量用computed.實現不了的再用watch.因為假入我們輸入的結果和上一次一致的時候.watch每次都會執行.而computed不會.這樣,watch會增加一些開銷.以後有時間再詳細說他倆的區別.

程式碼邏輯很簡單,直接看程式碼吧

<template>
    <div>
         <input type="text" v-model="username">
         <p style="color: red">{{msg}}</p>
    </div>
</template>

<script>

    export default = {
        data() {
           return {
             username: '',
        }
    },
        computed: {
          msg() {
              if(this.username.length < 3) {
                return "短了"
              } else if(this.username.length > 3) {
                return "長了"
              }else {
                return '合適'
              }
          }
  }
}

</script>
 

效果如圖:

     當然,判斷語句也可以這樣寫,也是沒問題的.

msg() {
        return this.username.length > 3
              ? "長了"
              : this.username.length < 3 
              ? "短了" 
              : this.username.length == 3 
              ? "合適" : "";
      }

     其實邏輯倒是很簡單.初學者容易犯的錯誤就是不知道應該計算誰.這個例子中.msg是根據username計算得出的.所以,msg應該寫在computed裡.