vue3

15.vue3/project1/src/App.vue

@@ -1,4 +1,6 @@
 <template>
+  <Demo7 />
+  <br>
   <Demo1 />
   <Demo2 />
   <Demo3 />
@@ -14,5 +16,6 @@ import Demo3 from "./components/Demo3.vue";
 import Demo4 from "./components/Demo4.vue";
 import Demo5 from "./components/Demo5.vue";
 import Demo6 from "./components/Demo6.vue";
+import Demo7 from "./components/Demo7.vue";
 </script>
 <style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo1.vue

@@ -23,6 +23,8 @@ export default {
         getAge() {
             alert(this.age)
         }
+    },
+    computed:{
     }
 }
 </script>

15.vue3/project1/src/components/Demo5.vue

@@ -15,6 +15,7 @@
 <script setup lang="ts" name="Demo5">
 import { ref, reactive } from "vue";
 let name = ref("小小");
+// 注意：
 let news = reactive({
     a:1,
     b:2,

15.vue3/project1/src/components/Demo6.vue

@@ -16,7 +16,6 @@ let person = reactive({
 // 解构
 /**
  * 使用toRefs从person这个响应式对象里 解构出name，age 并且解构出的东西仍旧是响应式的
- * 
  */
 let name1 = toRef(person,'name')
 // let {name,age} = toRefs(person);

15.vue3/project1/src/components/Demo7.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <h3>这是第七个demo</h3>
+    <p>姓:<input type="text" v-model='firstName'></p>
+    <p>名:<input type="text" v-model='lastName'></p>
+    <p>我叫:<span>{{fullName}}</span></p>
+    <p>我叫:<span>{{fullName}}</span></p>
+    <p>我叫:<span>{{fullName}}</span></p>
+    <p>我叫:<span>{{fullName}}</span></p>
+    <p>我叫:<span>{{fullName}}</span></p>
+
+    <button @click="changeName">修改姓名</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo7">
+import { ref, computed} from 'vue'
+let firstName = ref('孙');
+let lastName = ref("悟空");
+/*
+    计算属性：computed
+*/
+let fullName = computed({
+    get() {
+        return firstName.value + lastName.value;
+    },
+    set(val) {
+        console.log(val,'val')
+        let [a1,a2] = val.split('-');
+        firstName.value = a1;
+        lastName.value = a2;
+    }
+})
+
+
+function changeName() {
+    fullName.value = '唐-僧';
+}
+
+function getName() {
+    console.log("调用");
+   return firstName.value + lastName.value;
+}
+</script>
+<style lang='scss' scoped>
+
+</style>