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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152402.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录-刷题第二天

977. 有序数组的平方 题目链接&#xff1a;977. 有序数组的平方 思路&#xff1a;双指针思想&#xff0c;数组是有序的且含有负数&#xff0c;其中元素的平方一定是两边最大。定义两个指针&#xff0c;从两端开始向中间靠近&#xff0c;每次比较两个指针的元素平方大小&#…

线上bug-接口速度慢

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;双非大四&#xff0c;Java实习中…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&a…

腾讯云助力港华能源上线“碳汭星云2.0”,推动能源行业绿色低碳转型

11月17日&#xff0c;港华能源与腾讯云联合打造的港华智慧能源生态平台“碳汭星云2.0”升级上线。依托双方的连接、大数据能力和行业深耕经验&#xff0c;该平台打破了园区“数据孤岛”&#xff0c;进一步提升了数据治理、应用集成和复制推广能力&#xff0c;未来有望以综合能源…

【小呆的力学笔记】有限元专题之循环对称结构有限元原理

文章目录 1. 循环对称问题的提出2. 循环对称条件2.1 节点位移的循环对称关系2.2 节点内力的循环对称关系 3. 在平衡方程中引入循环对称条件 1. 循环对称问题的提出 许多工程结构都是其中某一扇面的n次周向重复&#xff0c;也就是是周期循环对称结构。如果弹性体的几何形状、约…

【每日刷题——语音信号篇】

思考与练习 练习2.1 语音信号在产生的过程中&#xff0c;以及被感知的过程中&#xff0c;分别要经过人体的哪些器官&#xff1f; 1.产生过程&#xff1a; 肺部空气 → \rightarrow →冲击声带 → \rightarrow →通过声道&#xff08;可以调节&#xff09; → \rightarrow →…

IDEA自动注解设置(中文版)

IDEA自动注解设置 1、添加类自动注释 文件 - 设置 - 编辑器 - 文件和代码模板 - Include - File Header /** *description&#xff1a;TODO *author&#xff1a; ${USER} *create&#xff1a; ${DATE} ${TIME} */2、添加类方法自动注释 文件 - 设置 - 编辑器 - 实时模版 - …

沸点 | Ultipa 图数据库金融应用场景优秀案例首批入选,金融街论坛年会发布

为推进图数据库在金融行业的创新应用试点&#xff0c;近日&#xff0c;在2023金融街论坛年会“全球金融科技中心网络年会暨ZIBS北京论坛”上&#xff0c;北京前沿金融监管科技研究院发布了基于国际标准组织——国际关联数据基准委员会&#xff08;LDBC&#xff09;的《图数据库…

Unexpected WSL error

问题描述 启动 Docker Desktop 报错 Unexpected WSL error&#xff0c;报错完整信息如下&#xff1a; Docker Desktop - Unexpected WSL error An unexpected error was encountered while executing a WSL command, Commoncauses include access rights issues, which occur…

阿里云ack集群升级流程

最近一直在升级过期的ack 集群版本 从1.22升级到1.24.。 参考&#xff1a; 升级流程、方式及所需时间

AIGC ChatGPT4对Gbase数据库进行总结

ChatGPT4 用一个Prompt完成Gbase数据库的总结。 AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 Excel 2021实操 …

微机原理_14

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。&#xff09; 1,下面寻址方式的操作数不在存储器中的是(&#xff09; A. 堆栈寻址 B. 寄存器间址 C.寄存器寻址 D. 直接寻址 2,条件转移指令JNE的条件是(&#xff09; A. CF…

数据结构--字符串的模式匹配

案例导入概念 朴素&#xff08;暴力&#xff09;模式匹配算法 定位操作&#xff1a; 计算时间复杂度 总结

【Kingbase FlySync】命令模式:部署双轨并行,并实现切换同步

【Kingbase FlySync】命令模式:安装部署同步软件&#xff0c;实现Oracle到KES实现同步 双轨并行方案说明一.准备工作二.环境说明三.目标实操(1).准备安装环境Orcle服务器(Oracle40)1.上传所有工具包2.操作系统配置a.增加flysync 用户、设置密码b.配置环境变量c.调整limits.conf…

clickhouse分布式之弹性扩缩容的故事

现状 社区不支持喔&#xff0c;以后也不会有了。曾经尝试过&#xff0c;难道是是太难了&#xff0c;无法实现吗&#xff1f;因为他们企业版支持了&#xff0c;可能是利益相关吧&#xff0c;谁知道呢&#xff0c;毕竟开源也要赚钱&#xff0c;谁乐意一直付出没有回报呢。 社区…

Mistral 7B 比Llama 2更好的开源大模型 (四)

Mistral 7B在平衡高性能和保持大型语言模型高效的目标方面迈出了重要的一步。通过我们的工作,我们的目标是帮助社区创建更实惠、更高效、更高性能的语言模型,这些模型可以在广泛的现实世界应用程序中使用。 Mistral 7B在实践中,对于16K和W=4096的序列长度,对FlashAttentio…

Python-----PyInstaller的简单使用

PyInstaller简介 PyInstaller是一个Python库&#xff0c;可以将Python应用程序转换为独立的可执行文件。PyInstaller支持跨平台&#xff0c;可以在Windows、Linux和MacOS上生成可执行文件。 PyInstaller会分析Python程序&#xff0c;并将程序打包成一个完整的可执行文件&…

复杂数据统计与R语言程序设计实验一

1.下载并安装R语言软件&#xff0c;熟悉基本操作的命令及操作界面&#xff0c;掌握软件的使用方法&#xff08;提供学号加姓名的截图&#xff09;。 2.下载并安装Rstudio&#xff0c; &#xff08;提供运行代码及运行结果的截图&#xff09;。 3.下载并安装R包DT&#xff0c;…

uniapp小程序定位;解决调试可以,发布不行的问题

遇见这个问题&#xff1b;一般情况就两种 1、域名配置问题&#xff1b; 2、隐私协议问题 当然&#xff0c;如果你的微信小程序定位接口没开启&#xff1b;定位也会有问题&#xff1b; 第一种&#xff0c;小程序一般是腾讯地图&#xff1b;所以一般都会用https://apis.map.qq.co…

【Java】volatile-内存可见性问题

1、什么是内存可见性问题&#xff1f; &#xff08;1&#xff09;实例 要明白什么是内存可见性&#xff0c;我们首先来看一段代码 public class demo1 {public static int isQuit 0;public static void main(String[] args) {Thread thread1 new Thread(()->{while (is…

Redis高级特性和应用(发布 订阅、Stream)

目录 发布和订阅 操作命令 发布消息 订阅消息 查询订阅情况 查看活跃的频道 查看频道订阅数 使用场景和缺点 Redis Stream Stream总述 常用操作命令 生产端 消费端 单消费者 消费组 创建消费组 消息消费 在Redis中实现消息队列 基于pub/sub 基于Stream Re…