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

<template>
  <div>
    <h1>首页</h1>
    <!-- <Demo13 v-if="isShow"></Demo13> -->
    <Demo18 ></Demo18>
    <!-- <Demo17 ></Demo17> -->
    <!-- <Demo16 ></Demo16> -->
    <!-- <Demo15 ></Demo15 > -->
    <!-- <Demo14 ref="main"></Demo14> -->
    <!-- <Demo12></Demo12> -->
    <!-- <Demo11></Demo11> -->
    <!-- <Demo10></Demo10> -->
    <!-- <Demo9></Demo9> -->
    <!-- <Demo8></Demo8> -->
    <!-- <Demo7></Demo7> -->
    <!-- <Demo6></Demo6> -->
    <!-- <Demo5></Demo5> -->
    <!-- <Demo4></Demo4> -->
    <!-- <Demo3></Demo3>
    <Demo2></Demo2>
    <Demo1></Demo1> -->
  </div>
</template>
<script setup name="App" lang="ts">
import {type partList} from './types/demo16';
import { onMounted, ref } 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';
import Demo16 from './components/Demo16.vue';
import Demo17 from './components/Demo17.vue';
import Demo18 from './components/Demo18.vue';
let isShow = ref(true)
let main = ref(null);
onMounted(()=>{
  console.log(main.value)
})
let newList:partList = [
  {
    flower:"牡丹",
    color:"红色",
    num:10
  },
  {
    flower:"水仙",
    color:"白色",
    num:7
  },
  {
    flower:"玫瑰",
    color:"蓝色",
    num:30
  },
]
</script>
<style scoped>
</style>