vue3

11.vue3/vue-project1/src/App.vue

@@ -3,7 +3,9 @@
 <template>
   <div>
     <h1>首页</h1>
-    <Demo5></Demo5>
+    <Demo7></Demo7>
+    <!-- <Demo6></Demo6> -->
+    <!-- <Demo5></Demo5> -->
     <!-- <Demo4></Demo4> -->
     <!-- <Demo3></Demo3>
     <Demo2></Demo2>
@@ -16,6 +18,8 @@ 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';
+import Demo7 from './components/Demo7.vue';
 </script>
 <style scoped>
 </style>

11.vue3/vue-project1/src/components/Demo5.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    demo4
+    demo5
     <p>我叫{{ obj.name }}.今年{{ obj.age }}岁,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}</p>
     <button @click="changeMain1">修改名字</button>
     <br>

11.vue3/vue-project1/src/components/Demo6.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    demo6
+       <p>我叫{{ obj.name }}.今年{{ obj.age }}岁,</p>
+       <button @click="changeName">修改姓名</button>
+  </div>
+</template>
+
+
+<script setup name="Demo6">
+import { reactive,toRefs,toRef } from 'vue';
+let obj = reactive({
+  name:"喜羊羊",
+  age:2
+})
+// 解构
+// let [a,b,c] = [1,2,3]
+// console.log(a,b,c)
+// let {name,age} = toRefs(obj);
+// console.log(name,age)
+let name1 = toRef(obj,'name')
+function changeName() {
+  name1.value = '美羊羊'
+  console.log(name1.value)
+}
+
+</script>
+
+<style>
+</style>

11.vue3/vue-project1/src/components/Demo7.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    demo7
+    <p>姓:<input type="text" v-model="firstName" /></p>
+    <p>名:<input type="text" v-model="lastName" /></p>
+    <button @click="showName">全拼</button>
+    <p>我叫:{{ fullName }}</p>
+    <p>我叫:{{ fullName }}</p>
+    <p>我叫:{{ fullName }}</p>
+    <p>我叫:{{ fullName }}</p>
+    <p>我叫:{{ fullName }}</p>
+    <p>我叫:{{ fullName }}</p>
+  </div>
+</template>
+
+
+<script setup name="Demo7">
+import { ref, computed } from "vue";
+let firstName = ref("胡");
+let lastName = ref("图图");
+let fullName = computed({
+  get() {
+    console.log("21");
+    return firstName.value + lastName.value;
+  },
+  set(val) {
+    console.log(val);
+    fullName = val;
+    let [x,y] = val.split("-");
+    firstName.value = x;
+    lastName.value = y;
+
+  },
+});
+function showName() {
+  console.log("1")
+  // return firstName.value + lastName.value;
+  fullName.value = '你-好'
+}
+</script>
+
+<style>
+</style>