（16）计算属性的 setter

最新推荐文章于 2024-05-18 16:55:08 发布

泽哥ins

最新推荐文章于 2024-05-18 16:55:08 发布

阅读量954

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_36213140/article/details/122784348

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、计算属性的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>

泽哥ins

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（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> n
复制链接

扫一扫