Vue学习笔记3.5 计算属性computed中的 get方法和set方法

淩亂°似流年 2022-03-28 11:25 1581阅读 0赞

关于computed计算属性的内容 可以移步到这里查看，这里就不再啰嗦

[https://blog.csdn.net/soulwyb/article/details/86228326][https_blog.csdn.net_soulwyb_article_details_86228326]

get：

在页面获取计算属性内容的时候调用。代码示例：

<!DOCTYPE html>
    <html>
    <head>
    	<title>计算属性的get方法和set方法</title>
    	<script src="vue.js"></script>
    </head>
    <body>
    	<div id='app'>
    		{
       {FullName}}
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el: '#app',
    		data: {
    			FirstName: 'Dell',
    			LastName: 'Lee'
    		},
    		computed: {
    			FullName: {
    				get: function() {
    					return this.FirstName + ' ' + this.LastName;
    				}
    			}
    		}
    	})
    </script>
    </html>

与computed的默认写法基本一样。

set：

<!DOCTYPE html>
    <html>
    <head>
    	<title>计算属性的get方法和set方法</title>
    	<script src="vue.js"></script>
    </head>
    <body>
    	<div id='app'>
    		{
       {FullName}}
    	</div>
    </body>
    <script>
    	var vm = new Vue({
    		el: '#app',
    		data: {
    			FirstName: 'Dell',
    			LastName: 'Lee'
    		},
    		computed: {
    			FullName: {
    				get: function() {
    					return this.FirstName + ' ' + this.LastName;
    				},
    				set: function(value) {
    					console.log(value)
    					var arr = value.split(" ");
    					this.FirstName = arr[0];
    					this.LastName = arr[1];
    				}
    			}
    		}
    	})
    </script>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

set方法是在数据发生改变的时候调用相应的代码执行。比如上面的代码。在set方法被调用后改变FirstName和LastName变量。而改变这两个变量后又相对应的触发了get方法。然后get方法将数据返回给FullName 最后显示到页面上。

[https_blog.csdn.net_soulwyb_article_details_86228326]: https://blog.csdn.net/soulwyb/article/details/86228326
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220328/0b6d45c8c4fc496caecdf8c41c2e6fce.png