效果圖

HTML

<input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <p>全名：{{fullName}}</p>      
</div>

js

<script>
      // 計算屬性是根據data中已有的屬性，計算得到一個新的屬性
      var vm = new Vue({
        el: '#app',
        data: {
          firstName:
 
 '吖',
          lastName: '呆'
        },
        // 定義計算屬性在computed屬性中
        computed: {
          // 這個屬性中寫函式，但是這個函式名字非常特殊，它可以作為一個屬性直接使用
          // 計算屬性依賴快取，當頁面多次使用同一個計算屬性的時候，它會將第一次計算出來的結果快取起來，後續直接呼叫第一次的結果就行了，而不必再走計算邏輯
          fullName() {
            console.log('通過計算屬性實現');
            // 必須有return, 但這裡面不能處理非同步操作
 

            return this.firstName + this.lastName
          }
        }
      })
  </script>