diff --git a/08_计算属性/1.姓名案例_插值语法实现.html b/08_计算属性/1.姓名案例_插值语法实现.html
new file mode 100644
index 0000000..f0cf862
--- /dev/null
+++ b/08_计算属性/1.姓名案例_插值语法实现.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>1.姓名案例_插值语法实现</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>{{firstName}}-{{lastName}}</span>
+</div>
+
+<script type="text/javascript">
+    new Vue({
+        el: '#root',
+        data: {
+          firstName: "张",
+          lastName: "三"
+        },
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/08_计算属性/2.姓名案例_methods实现.html b/08_计算属性/2.姓名案例_methods实现.html
new file mode 100644
index 0000000..1269731
--- /dev/null
+++ b/08_计算属性/2.姓名案例_methods实现.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>2.姓名案例_methods实现</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">
+  new Vue({
+    el: '#root',
+    data: {
+      firstName: "张",
+      lastName: "三"
+    },
+    methods: {
+      fullName(){
+        return this.firstName + '-' + this.lastName
+      }
+    }
+  })
+</script>
+</body>
+</html>
\ No newline at end of file
