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

最新推荐文章于 2024-05-30 09:36:24 发布

@凌晨三点半

最新推荐文章于 2024-05-30 09:36:24 发布

阅读量1.4k

点赞数

分类专栏： Vue.js 文章标签： Vue computed get set 计算属性

本文链接：https://blog.csdn.net/soulwyb/article/details/86231976

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

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

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>

效果：

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

@凌晨三点半

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记3.5 计算属性computed中的 get方法和set方法

关于computed计算属性的内容可以移步到这里查看，这里就不再啰嗦https://blog.csdn.net/soulwyb/article/details/86228326get：在页面获取计算属性内容的时候调用。代码示例：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;计算属性的get方法和set...
复制链接

扫一扫