vue3 setup展示数据

效果图

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

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>

1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17