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" 即可试验。

展开阅读全文

没有更多推荐了,返回首页