W260426/16.vue3/project1/src/App.vue

<template>
  <div>
    <hr />
    <hr />
    <Demo15></Demo15>
    <!-- <Demo14 :news="person"></Demo14> -->
    <!-- <Demo13 v-if="show"></Demo13> -->
    <!-- <Demo12 ref="main"></Demo12>
    <button @click="getMain">展示</button> -->

    <hr />
    <hr />
    <!-- <Demo7></Demo7>
    <hr />
    <hr />
    <Demo6></Demo6>
    <hr />
    <hr />
    <Demo1></Demo1>
    <hr />
    <hr />
    <Demo2></Demo2>
    <hr />
    <hr />
    <Demo3></Demo3>
    <hr />
    <hr />
    <Demo4></Demo4>
    <hr />
    <hr />
    <Demo5></Demo5> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
// import Demo1 from "./components/Demo1.vue";
// 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";
// import Demo8 from "./components/Demo8.vue";
// import Demo9 from "./components/Demo9.vue";
// import Demo10 from "./components/Demo10.vue";
// import Demo11 from "./components/Demo11.vue";
// import Demo12 from "./components/Demo12.vue";
// import Demo13 from "./components/Demo13.vue";
// import Demo14 from "./components/Demo14.vue";
import Demo15 from "./components/Demo15.vue";

interface x {
  name: string;
  age: number;
}
let main = ref();

function getMain() {
  console.log(main.value);
}
let show = ref(true);
let ww = reactive<{
  desc: string;
  num: string;
}>({
  desc: "图图",
  num: "30",
});
let person = reactive<x[]>([
  {
    name: "图图",
    age: 3,
  },
  {
    name: "孙悟空",
    age: 500,
  },
  {
    name: "猪八戒",
    age: 400,
  },
]);
</script>

<style lang="scss" scoped>
</style>