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

通常情况下只使用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>

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页