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

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

https://blog.****.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>

效果：

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

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

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

相关推荐