计算属性

计算属性：所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

有缓存的功能

有get和set
每一个计算属性都包含一个getter和一个setter，我们上面的两个示例都是计算属性的默认用法，只是利用了getter来读取。在你需要时，也可以提供一个setter函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作，

computed: {
      fullName: {
          // getter，用于读取
          get: function () {
              return this.firstName + ' ' + this.lastName;
          },
          // setter，写入时触发
          set: function (newValue) {
              var names = newValue.split(' ');
              this.firstName = names[0];
              this.lastName = names[names.length - 1];
          }
      }
  }

示例：

代码清单 charp-03/3.html

  <!DOCTYPE html>
  <html>
  
  <head>
      <meta charset="utf-8">
      <title>Vue 指令与事件</title>
  </head>
  
  <body>
      <div id="app">
          <a target="_blank" v-bind:href="url">百度一下</a>
          <a target="_blank" :href="url">百度一下(语法糖)</a>
          <h1 v-if="show">你好</h1>
          <button v-on:click="showOrHideClick">{{showText}}</button>
          <button @click="showOrHideClick">{{showText}}((语法糖))</button>
      </div>
      <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  show: true,
                  url: 'http://www.baidu.com'
              },
              methods: {
                  showOrHideClick: function () {
                      this.show = !this.show;
                  }
              },
              computed: { //计算属性（有缓存的功能）
                  showText: function () {
                      return this.show ? "隐藏" : "显示";
                  }
              },
          })
      </script>
  </body>
  
  </html>

          <button>{{showText}}</button>
          ...
          data: {
                show: true,
            },
          computed: { //计算属性（有缓存的功能）
                showText: function () {
                    return this.show ? "隐藏" : "显示";
                }
            },