当涂 微网站开发公司,创建平台,镇江建设集团网站,如何做好集团网站建设效果图 1.创建数据 content.js
import { reactive } from vueconst data reactive({color:red,title: 二十四节气,subTitle: 节气#xff0c;是干支历中表示自然节律变化以及确立“十二月建”#xff08;月令#xff09;的特定节令。,list: [{name: 立春,con…效果图 1.创建数据 content.js
import { reactive } from vueconst 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 data2.在app.vue 引入
templatediv idapph3 classtitle{{ data.title }}/h3div classsubtitle{{ data.subTitle }}/div/div
/templatescript setup
import data from ./stare/content.js;
/script
3封装成组件headTitle
headTitle.vue
templateh3 classtitle{{ title }}/h3div classsubtitle{{ subTitle }}/div
/template
script setup
import { defineProps } from vue;
defineProps({title: {type: String,default: 默认标题,},subTitle: {type: String,default: 默认子标题,}
});
/scriptapp.vue
templatediv idappheadTitle :titledata.title :subTitledata.subTitle //div
/template
script setup
import data from ./stare/content.js;
import headTitle from ./headTitle.vue
/script4列表循环
app.vue
templatediv idappheadTitle :titledata.title :subTitledata.subTitle /div classcontdiv v-for(item, index) in data.list :keyindex classlistdiv classimgimg :srcitem.imgUrl //divdiv classname{{ item.name }}/divdiv classcontent{{ item.content }}/div/div/div/div
/template
script setup
import data from ./stare/content.js;
import headTitle from ./headTitle.vue
/script5封装list 内容 list.vue
templatediv classcontdiv v-for(item, index) in list :keyindex classlistdiv classimgimg :srcitem.imgUrl //divdiv classname{{ item.name }}/divdiv classcontent{{ item.content }}/div/div/div
/template
script setup
import { defineProps } from vue;
defineProps({list: {type: Array},
});
/scriptapp.vue
templatediv idappheadTitle :titledata.title :subTitledata.subTitle /list :listdata.list//div
/template
script setup
import data from ./stare/content.js;
import headTitle from ./headTitle.vue
import list from ./list.vue
/script6封装 headTitle 和 list cont.vue
templatediv :style{ color: color }ppp/divheadTitle :titledatas.title :subTitledatas.subTitle /listComponent :listdatas.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
/styleapp.vue 模拟api 请求数据
templatediv idappcont :datasdata/cont/div
/templatescript 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
