Vue computed计算属性

效果图

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>