07.计算属性 getter 与 setter 方法

最新推荐文章于 2024-08-14 13:56:16 发布

@司马懿

最新推荐文章于 2024-08-14 13:56:16 发布

阅读量123

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118707670

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<div id="app">
  <h2>姓名：{{fullname}}</h2>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',

    data: {
      firstname: 'Kobe',
      lastName: 'sadasd'
    },

    computed: {
      /*
      * 计算属性中一般是没有set方法的，我们不希望浏览器上可以输入改变数据的值吗，
      * 所以只有get方法，但是最后优化后，就get 方法也不写了，直接在
      *   fullname: function () {
            return this.firstname + ' ' + this.lastName;
          }
      * 下面是标准写法 get 与 set 方法
      * */
      fullname: {
        set: function (newValue) {
          const name = newValue.split(' ');
          this.firstname = name[0];
          this.lastName = name[1];
        },
        get: function () {
          return this.firstname + ' ' + this.lastName;
        }
      }
    }

  })
</script>
</body>
</html>