vue3

16.vue3/project1/src/App.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <hr />
+    <hr />
+    <Demo6></Demo6>
+    <hr />
+    <hr />
     <Demo1></Demo1>
     <hr />
     <hr />
@@ -22,6 +27,7 @@ import Demo2 from "./components/Demo2.vue";
 import Demo3 from "./components/Demo3.vue";
 import Demo4 from "./components/Demo4.vue";
 import Demo5 from "./components/Demo5.vue";
+import Demo6 from "./components/Demo6.vue";
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Demo6:Computed</h1>
+    <p>姓: <input type="text" v-model="firstName" /></p>
+    <p>名: <input type="text" v-model="lastName" /></p>
+    <p>全名:{{ fullName }}</p>
+    <button @click="handleClick">修改全名</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed } from "vue";
+let firstName = ref("孙");
+let lastName = ref("悟空");
+// let fullName = computed(() => {
+//   return firstName.value + lastName.value;
+// });
+let fullName = computed({
+  get() {
+    return firstName.value + lastName.value;
+  },
+  set(val) {
+    let arr = val.split("-");
+    firstName.value = arr[0];
+    lastName.value = arr[1];
+  },
+});
+const handleClick = () => {
+  fullName.value = "hu-tutu";
+};
+</script>
+
+<style lang="scss" scoped>
+</style>