06 vue 计算属性使用 getter和setter对象设置对象

最新推荐文章于 2024-07-23 15:40:17 发布

技术~子云

最新推荐文章于 2024-07-23 15:40:17 发布

阅读量151

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/davice_li/article/details/127466216

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>计算属性的setter和getter</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fullName}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({

				el: "#app",
				data:{
					lastName:"lee",
					firstName:"jack"
				},
				computed:{
					//设置fullName对象的值。
					fullName:{
						get:function() {
							//获取属性的值
							return this.firstName +" " +this.lastName;
						},
						set:function(value) {
							//设置对象的值
							//使用" " 分隔设置的对象
							var arr = value.split(" ");
							this.firstName = arr[0];  //设置firstName
							this.lastName = arr[1];   //设置lastName

						}
					}
				}
			})
		</script>


	</body>
</html>