更新

tianyucoder · tianyucoder · commit f517d65bb469 · 2021-01-13T12:08:28.000+08:00
diff --git a/07_计算属性_computed/2.姓名案例_methods实现.html b/07_计算属性_computed/2.姓名案例_methods实现.html
@@ -11,6 +11,9 @@
 			姓：<input type="text" v-model="firstName"> <br/>
 			名：<input type="text" v-model="lastName"><br/>
 			<span>全名:{{getFullName()}}</span>
+			<span>全名:{{getFullName()}}</span>
+			<span>全名:{{getFullName()}}</span>
+			<span>全名:{{getFullName()}}</span>
 		</div>
 
 		<script type="text/javascript" >
diff --git a/07_计算属性_computed/3.姓名案例_computed实现.html b/07_计算属性_computed/3.姓名案例_computed实现.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>姓名案例_computed实现</title>
+		<script type="text/javascript" src="../js/vue.js"></script>
+	</head>
+	<body>
+		<!-- 
+				1.计算属性：要显示的数据不存在，要通过计算得来。
+				2.fullName函数底层用到的是对象setter和getter方法
+				3.执行的时机：
+						(1).初始显示会执行一次，得到初始值去显示。
+						(2).当依赖的数据发生改变时会被再次调用。
+				4.优势：与methods实现相比，内部有缓存机制，效率更高。
+				5.备注：计算属性是用于直接读取使用的，不要加()
+		-->
+		<!-- 准备好一个容器-->
+		<div id="root">
+			姓：<input type="text" v-model="firstName"> <br/><br/>
+			名：<input type="text" v-model="lastName"><br/><br/>
+			<span>全名:{{fullName}}</span><br/><br/>
+			全名: <input type="text" v-model="fullName">
+		</div>
+
+		<script type="text/javascript" >
+			const vm = new Vue({
+				el:'#root',
+				data:{
+					firstName:'张',
+					lastName:'三',
+				},
+				computed:{
+					/* 
+						1.fullName是谁在调用？---Vue
+						2.fullName什么时候调用？初次渲染会调用、当依赖的属性值发生变化
+					*/
+
+					//简写---相当与只指定了get，没有指定set
+					fullName(){ 
+						console.log('fullName')
+						return this.firstName + '-' + this.lastName
+					}
+					
+					//完整写法----set和get都指定了
+					/* fullName:{
+						set(value){ //fullName被修改时set被调用，set中的this是vm，set会收到修改的值
+							const arr = value.split('-')
+							this.firstName = arr[0]
+							this.lastName = arr[1]
+						},
+						get(){ //fullName被读取时get被调用，get中的this是vm
+							console.log('get')
+							return this.firstName + '-' + this.lastName
+						}
+					} */
+					
+				}
+			})
+			
+			console.log(vm)
+		</script>
+	</body>
+</html>
