Vue基础-计算属性的getter和Setter

多一点开心

于 2020-10-06 21:26:17 发布

阅读量1.2k

点赞数

分类专栏： vue

本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。

本文链接：https://blog.youkuaiyun.com/qq_38060231/article/details/108943641

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

本文探讨Vue框架中计算属性的getter和setter用法。通过getter，我们在访问计算属性时会触发特定逻辑；而setter则在设置值时执行相应操作。详细介绍了这两个方法在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、getter和setter

当我们取计算属性值的时候会执行get方法，设置的时候会执行set方法
在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
 	<title>计算属性的getter和Setter</title>
 <script src="./vue.js"></script>
 </head>
 <body>
 <div id="app">{{fullName}}</div>
 <script>
   var vm = new Vue({
     el: "#app",
     data: {
       firstName: "maomao",
       lastName: "liu",
     },
     computed: {
       /* fullName: function() {
         return this.lastName + " " + this.firstName;
       } */
       fullName: {
         get: function() {
           console.log("计算了一次");
           return this.lastName + " " + this.firstName;
         },
         set: function(value) {
           console.log(value)
           var array = value.split(" ");
           this.lastName = array[0];
           this.firstName = array[1];
         }
       }
     }
   })
 </script>
 </body>
</html>