添加案例

2 years ago · 5b450a3f80
parent ebc6b2c321
commit 5b450a3f80
2 changed files with 71 additions and 0 deletions
--- a/08_计算属性/3.姓名案例_计算属性实现.html
+++ b/08_计算属性/3.姓名案例_计算属性实现.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>3.姓名案例_计算属性实现</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    姓：<input type="text" v-model="firstName"> <br>
+    名：<input type="text" v-model="lastName"> <br>
+    姓名： <span>{{fullName}}</span>
+</div>
+
+<script type="text/javascript">
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            firstName: "张",
+            lastName: "三"
+        },
+        computed: {
+            fullName: {
+                get() {
+                    return this.firstName + '-' + this.lastName
+                },
+                set(value){
+                    const arr = value.split('-')
+                    this.firstName = arr[0]
+                    this.lastName = arr[1]
+                }
+            }
+        }
+
+    })
+    console.log(vm)
+</script>
+</body>
+</html>
--- a/08_计算属性/4.姓名案例_计算属性简写.html
+++ b/08_计算属性/4.姓名案例_计算属性简写.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4.姓名案例_计算属性简写</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    姓：<input type="text" v-model="firstName"> <br>
+    名：<input type="text" v-model="lastName"> <br>
+    姓名： <span>{{fullName}}</span>
+</div>
+
+<script type="text/javascript">
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            firstName: "张",
+            lastName: "三"
+        },
+        computed: {
+            fullName() {
+                return this.firstName + '-' + this.lastName
+            }
+        }
+
+    })
+    console.log(vm)
+</script>
+</body>
+</html>