vue 计算属性的getter 与 setter

最新推荐文章于 2024-04-15 20:26:27 发布

原创最新推荐文章于 2024-04-15 20:26:27 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨Vue框架中计算属性的使用方法，包括getter与setter的实现细节，通过具体实例展示了如何利用计算属性来简化模板中复杂的逻辑表达，提高代码的可读性和维护性。

计算属性上，可以设置，set 与get:

<!DOCTYPE html>
<html>
<head>
	<title>计算属性的 getter 与 setter</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>{{fullName}}</div>
	</div>
	<script>
		var app = new Vue({
			el: '#root',
			data:{
				msg:"hello",
				firstName:"Dell",
				lastName:"Lee"
			},
			computed:{
				fullName: {
					get: function(){
						return this.firstName + " " + this.lastName;
					},
					set: function(value){
						var arr = value.split(" ");
						this.firstName = arr[0];
						this.lastName = arr[1];
						console.log(value);
					}
				}
			}
		})
	</script>

</body>
</html>

在浏览器的 console 中输入： app.fullName = "a b" 即可试验。