Vue学习笔记——计算属性的setter和getter

渣渣圆

于 2021-03-06 00:09:50 发布

阅读量188

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44154577/article/details/114421282

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

通常情况下只使用getter，获取数据

setter一般不用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
<!--  <h2>{{fullName}}</h2>-->
  <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'yuan',
      lastName:'huayuan'
    },
    computed:{
      
      fullName:{
        //计算属性中get方法一般不使用，只是一个只读属性
        set(newValue){
          console.log('-------------',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get(){
          return this.firstName+" "+this.lastName
        }
      }
    }
  })
</script>
</body>
</html>