（16）计算属性的 setter

一、计算属性的setter介绍

计算属性默认只有 getter，Vue.js 也允许给计算属性设置setter 。

示例一：默认书写方式

<body>
  <div id="app">
    <p>{{ fullName }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: '田',
        lastName: '根旺'
      },
      computed: {
        fullNam: {
          return this.firstName + this.lastName;
        }
      }
    })
  </script>
</body>

示例二：通过set属性

重新赋予新的值，可以再执行的时候更改，我们通过将姓氏和名字用空格分隔，然后通过split分隔空格，分割成2部分元素，然后就可以啦！

注意：我们最常用的还是默认的书写方式，就是get的方式，然后当我们需要整体需要更改的时候可以使用set属性的方式！

<body>
  <div id="app">
    <p>{{ fullName }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: '田',
        lastName: '根旺'
      },
      computed: {
        // fullName: {
        //   return this.firstName + this.lastName;
        // }
        fullName: {
          get() {
            return this.firstName + this.lastName;
          },
          set(newValue) {
            console.log(newValue);
            var nameArr = newValue.split(' ');
            this.firstName = nameArr[0];
            this.lastName = nameArr[1];
          }
        }
      }
    })
  </script>
</body>

0 条评论