vue3 setup展示数据

news2024/10/6 18:27:16

效果图
在这里插入图片描述
1.创建数据
content.js

import { reactive } from 'vue'

const data = reactive({
    color:'red',
    title: '二十四节气',
    subTitle: '节气，是干支历中表示自然节律变化以及确立“十二月建”（月令）的特定节令。',
    list: [
        {
            name: "立春",
            content: '立春，为二十四节气之首。立，是“开始”之意；春，代表着温暖、生长。',
            imgUrl: require('../assets/images/01.png')
        },
        {
            name: "雨水",
            content: '雨水，是二十四节气之第2个节气。',
            imgUrl: require('../assets/images/02.png')
        },
        {
            name: "惊蛰",
            content: '惊蛰，是二十四节气中的第三个节气。',
            imgUrl: require('../assets/images/03.png')
        },
        {
            name: "春分",
            content: '春分，是二十四节气之一，春季第四个节气。',
            imgUrl: require('../assets/images/04.png')
        },
        {
            name: "清明",
            content: '清明，是二十四节气之一，春季的第五个节气。',
            imgUrl: require('../assets/images/05.png')
        },
        {
            name: "谷雨",
            content: '谷雨，是二十四节气之第6个节气，春季的最后一个节气。',
            imgUrl: require('../assets/images/06.png')
        },
        {
            name: "立夏",
            content: '立夏，是二十四节气中的第7个节气，夏季的第一个节气，交节时间在每年公历5月05-07日。',
            imgUrl: require('../assets/images/07.png')
        },
        {
            name: "小满",
            content: '小满，二十四节气中的第八个节气，也是夏季的第二个节气。',
            imgUrl: require('../assets/images/08.png')
        },
        {
            name: "芒种",
            content: '芒种，是二十四节气之第九个节气，夏季的第三个节气，干支历午月的起始。',
            imgUrl: require('../assets/images/09.png')
        },
        {
            name: "夏至",
            content: '夏至，是二十四节气的第10个节气。',
            imgUrl: require('../assets/images/10.png')
        },
        {
            name: "小暑",
            content: '小暑，是二十四节气之第十一个节气，干支历午月的结束以及未月的起始。',
            imgUrl: require('../assets/images/11.png')
        },
        {
            name: "大暑",
            content: '大暑，是二十四节气中的第十二个节气，也是夏季最后一个节气。',
            imgUrl: require('../assets/images/12.png')
        },
        {
            name: "立秋",
            content: '立秋，是“二十四节气”之第十三个节气，也是秋季的起始。',
            imgUrl: require('../assets/images/13.png')
        },
        {
            name: "处暑",
            content: '处暑，是二十四节气之第十四个节气，也是秋季的第二个节气。',
            imgUrl: require('../assets/images/15.png')
        },
        {
            name: "白露",
            content: '白露，是“二十四节气”中的第15个节气，秋季第3个节气，干支历申月的结束与酉月的起始。',
            imgUrl: require('../assets/images/16.png')
        },
        {
            name: "秋分",
            content: '秋分，是二十四节气之第十六个节气，秋季第四个节气。',
            imgUrl: require('../assets/images/17.png')
        },
        {
            name: "寒露",
            content: '寒露，是二十四节气之第十七个节气，秋季的第五个节气。',
            imgUrl: require('../assets/images/18.png')
        },
        {
            name: "霜降",
            content: '霜降，是二十四节气中的第十八个节气，秋季的最后一个节气。',
            imgUrl: require('../assets/images/19.png')
        },
        {
            name: "立冬",
            content: '立冬，是二十四节气之第十九个节气，也是冬季的起始。',
            imgUrl: require('../assets/images/20.png')
        },
        {
            name: "小雪",
            content: '小雪，是二十四节气中的第20个节气，冬季第2个节气。',
            imgUrl: require('../assets/images/21.png')
        },
        {
            name: "大雪",
            content: '大雪，是二十四节气中的第21个节气，冬季的第三个节气。',
            imgUrl: require('../assets/images/22.png')
        },
        {
            name: "冬至",
            content: '冬至，又称日南至、冬节、亚岁等，兼具自然与人文两大内涵，既是二十四节气中一个重要的节气，也是中国民间的传统祭祖节日。',
            imgUrl: require('../assets/images/23.png')
        },
        {
            name: "小寒",
            content: '小寒，是二十四节气中的第23个节气，冬季的第5个节气，干支历子月的结束与丑月的起始。',
            imgUrl: require('../assets/images/24.png')
        },
        {
            name: "大寒",
            content: '大寒，是二十四节气中的最后一个节气。',
            imgUrl: require('../assets/images/25.png')
        }
    ]
})


export default data

2.在app.vue 引入

<template>
  <div id="app">
     <h3 class="title">{{ data.title }}</h3>
     <div class="subtitle">{{ data.subTitle }}</div>
  </div>
</template>

<script setup>
import data from "./stare/content.js";
</script>

3封装成组件headTitle

headTitle.vue

<template>
  <h3 class="title">{{ title }}</h3>
  <div class="subtitle">{{ subTitle }}</div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
  title: {
    type: String,
    default: "默认标题",
  },
  subTitle: {
    type: String,
    default: "默认子标题",
  }
});
</script>

app.vue

<template>
  <div id="app">
     <headTitle :title="data.title" :subTitle="data.subTitle" />
  </div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
</script>

4列表循环

app.vue

<template>
  <div id="app">
     <headTitle :title="data.title" :subTitle="data.subTitle" />
     <div class="cont">
      <div v-for="(item, index) in data.list" :key="index" class="list">
      <div class="img">
        <img :src="item.imgUrl" />
      </div>
      <div class="name">{{ item.name }}</div>
      <div class="content">{{ item.content }}</div>
    </div>
  </div>
  </div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
</script>

5封装list 内容
list.vue

<template>
  <div class="cont">
    <div v-for="(item, index) in list" :key="index" class="list">
      <div class="img">
        <img :src="item.imgUrl" />
      </div>
      <div class="name">{{ item.name }}</div>
      <div class="content">{{ item.content }}</div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
  list: {
    type: Array
  },
});
</script>

app.vue

<template>
  <div id="app">
     <headTitle :title="data.title" :subTitle="data.subTitle" />
     <list :list="data.list"/>
  </div>
</template>
<script setup>
import data from "./stare/content.js";
import headTitle from "./headTitle.vue"
import list from "./list.vue"
</script>

6封装 headTitle 和 list
cont.vue

<template>
  <div :style="{ color: color }">ppp</div>
  <headTitle :title="datas.title" :subTitle="datas.subTitle" />
  <listComponent :list="datas.list" />
</template>
<script setup>
import headTitle from "./headTitle.vue";
import listComponent from "./list.vue";
import { computed, defineProps } from "vue";
const props = defineProps({
  datas: {
    type: Object,
    default: () => ({}),
  },
});
console.log(props.datas.color);
const color = computed(() => {
  return  props.datas.color;
});
</script>
<style>
</style>

app.vue 模拟api 请求数据

<template>
  <div id="app">
    <cont :datas="data"></cont>
  </div>
</template>

<script setup>
import { ref } from "vue";
import cont from "./components/cont.vue";
const data = ref({});
setTimeout(() => {
  import("./stare/content.js").then((res) => {
    console.log(res.default);
    data.value = res.default;
  });
}, 1000);
</script>