vue3

15.vue3/vue_project1/src/App.vue

@@ -6,6 +6,7 @@
     <Demo4 />
     <Demo5 />
     <Demo6 />
+    <Demo7 />
   </div>
 </template>
 
@@ -16,5 +17,8 @@ import Demo32 from "./components/Demo36.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></style>
+
+

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div>
+      姓:
+      <input type="text" v-model='firstName' />
+      <br />
+      名:
+      <input type="text" v-model='lastName' />
+      <button @click="changeName">全名</button>
+      <!-- 1.直接拼接 -->
+      <!-- <p>我叫:{{ firstName + lastName }}</p> -->
+      <!-- 2.方法 -->
+      <p>
+        <!-- {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }}
+        {{ changeName() }} -->
+        <!-- {{ fullName }} -->
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+        {{ fullName }}
+      </p>
+    </div>
+  </div>
+</template>
+  
+<script setup name="Demo7">
+  import { ref,computed } from "vue";
+  let firstName = ref("懒");
+  let lastName = ref("羊羊");
+  let fullName = computed({
+    get() {
+      console.log("计算属性");
+      return firstName.value + lastName.value;
+    },
+    set(value) {
+      let [a1,a2] = value.split("-")
+      console.log(a1,a2)
+      firstName.value = a1;
+      lastName.value = a2;
+
+    }
+  })
+  function changeName() {
+    console.log('走进来')
+    fullName.value = '小-灰灰'
+  //  return  firstName.value + lastName.value;
+  }
+  // computed(){
+
+  // }
+</script>
+  <style></style>