07.计算属性 getter 与 setter 方法

最新推荐文章于 2023-09-08 20:18:03 发布

@司马懿

最新推荐文章于 2023-09-08 20:18:03 发布

阅读量89

点赞数

分类专栏： 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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@司马懿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07.计算属性 getter 与 setter 方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>姓名：{{fullname}}</h2></div>&l.
复制链接

扫一扫