vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,9 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo5></Demo5>
+    <hr>
+    <hr>
     <Demo1></Demo1>
     <hr>
     <hr>
@@ -38,9 +41,6 @@ export default {
     <hr>
     <hr>
     <Demo4></Demo4>
-    <hr>
-    <hr>
-    <Demo4></Demo4>
   </div>
 </template>
 

17.Vue3/project/src/components/Demo5.vue

@@ -2,14 +2,49 @@
   <div>
     <h2>Demo5</h2>
     <p>
-        Computed
+        Computed计算属性:根据已有的数据计算出新的数据
     </p>
+    姓: <input type="text" v-model="firstName">
+    <br>
+    名: <input type="text" v-model="lastName">
+    <br>
+    <button @click="changeName">修改名字:Zhang-San</button>
+    <br>
+    全名:{{ firstName + lastName }}
+    <br>
+    全名:{{ getName() }}
+    <br>
+    全名:{{ fullName }}
+    <br>
+    全名:{{ fullName1 }}
   </div>
 </template>
 
-<script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+<script setup>
+import {ref,reactive,computed} from "vue" 
+let firstName = ref("");
+let lastName = ref("");
+//计算属性： 只读不修改
+let fullName = computed(()=>{
+    return firstName.value + lastName.value;
+})
+function getName() {
+    return firstName.value + lastName.value;
+}
+// 计算属性：可以读取及修改
+let fullName1 = computed({
+    get() {
+        return firstName.value + lastName.value;
+    },
+    set(val) {
+        console.log(val,'val')
+        firstName.value = val.split("-")[0];
+        lastName.value = val.split("-")[1];
+    }
+})
+function changeName() {
+    fullName1.value = 'Zhang-San';
+}
 </script>
 
 <style lang="scss" scoped>