Vuejs——计算属性的setter和getter

最新推荐文章于 2023-11-09 21:34:15 发布

just-so-so.

最新推荐文章于 2023-11-09 21:34:15 发布

阅读量156

点赞数

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

本文链接：https://blog.csdn.net/weixin_43911280/article/details/104294546

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

每个计算属性都包含一个getter和一个setter。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:'#app',
      data:{
        firstName:'kole',
        lastName:'brya'

      },
      computed:{
    //     fullName:function (){
    //       return this.firstName + ' '+ this.lastName
    // },
    // name:'coderwhy'
      fullName: {

        // 计算属性一般没有set方法，只读属性
        set: function (newValue) {
          // console.log('---------',newValue)
          const names = newValue.split(' ');
          this.firstName =names[0];
          this.lastName =names[1];

        },

        get: function () {
          return this.firstName + ' ' + this.lastName
         }
        // fullName: function () {
        //   return this.firstName + ' ' + this.lastName
        // }
      }
      }
    })
</script>
</body>
</html>