vue实现课表，不同课程颜色不同

课表数据是一个数组，数组中每个元素是每一天的第一节。如下：

claimList: [{startTime: '8:00',endTime: '8:45',monday: '数学',tuesday: '语文',wednesday: '政治',thursday: '地理',friday: '政治',saturday: '英语',sunday: '化学',}, { startTime: '8:00',endTime: '8:45',monday: '数学',tuesday: '语文',wednesday: '政治',thursday: '地理',friday: '政治',saturday: '英语',sunday: '化学',}, {}]

实现效果：

实现思路：

在遍历的时候拿到表格里面的值

<div class="div" :style="{'background-color': getcolorb(itemv.monday),color: getcolort(itemv.monday)}">{{ itemv.monday }}</div>

然后在方法里面进行字段匹配

 textStyle(name) {switch (name) {case "数学":return "#01D0A6"case "语文":return "#CC689C"case "英语":return "#0A2440"case "化学":return "#6E97E8"case "生物":return "#1BCB41"case "政治":return "#C01240"case "历史":return "#ff40240Af"}},

实现完整代码：

<template><div classs=""><table align="center"><thead style="height: 30px"><tr style="height: 30px"><th style="width: auto" width="48"></th><th style="height: 30px" v-for="(item, index) in weekList" :key="index"><p style="font-size: 1px; color: #c0c0c1">{{ item.name }}</p></th></tr></thead><tbody><tr v-for="(itemv, indexv) in claimList" :key="indexv"><td><div class="time">{{ indexv + 1 }}</div><div class="time">{{ itemv.startTime }}</div><div class="time">{{ itemv.endTime }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.monday),color: getcolort(itemv.monday)}">{{ itemv.monday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.tuesday),color: getcolort(itemv.tuesday),}">{{ itemv.tuesday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.wednesday),color: getcolort(itemv.wednesday),}">{{ itemv.wednesday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.thursday),color: getcolort(itemv.thursday),}">{{ itemv.thursday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.friday),color: getcolort(itemv.friday),}">{{ itemv.friday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.saturday),color: getcolort(itemv.saturday),}">{{ itemv.saturday }}</div></td><td><div class="div" :style="{'background-color': getcolorb(itemv.sunday),color: getcolort(itemv.sunday),}">{{ itemv.sunday }}</div></td></tr></tbody></table></div>
</template>

<script>
export default {name: 'lessonIndex',data() {return {weekList: [{ name: '周一' },{ name: '周二' },{ name: '周三' },{ name: '周四' },{ name: '周五' },{ name: '周六' },{ name: '周日' },],claimList: [{startTime: '8:00',endTime: '8:45',monday: '数学',tuesday: '语文',wednesday: '政治',thursday: '地理',friday: '政治',saturday: '英语',sunday: '化学',}, {startTime: '8:00',endTime: '8:45',monday: '历史',tuesday: '语文',wednesday: '政治',thursday: '数学',friday: '地理',saturday: '生物',sunday: '化学',}, {startTime: '8:00',endTime: '8:45',monday: '数学',tuesday: '政治',wednesday: '语文',thursday: '数学',friday: '英语',saturday: '生物',sunday: '政治',}, {startTime: '8:00',endTime: '8:45',monday: '历史',tuesday: '英语',wednesday: '语文',thursday: '数学',friday: '地理',saturday: '数学',sunday: '英语',}, {startTime: '8:00',endTime: '8:45',monday: '历史',tuesday: '语文',wednesday: '政治',thursday: '数学',friday: '地理',saturday: '生物',sunday: '化学',}, {startTime: '8:00',endTime: '8:45',monday: '数学',tuesday: '政治',wednesday: '语文',thursday: '数学',friday: '英语',saturday: '生物',sunday: '政治',},]}},components: {},methods: {// 返回字体样式textStyle(name) {switch (name) {case "数学":return "#01D0A6"case "语文":return "#CC689C"case "英语":return "#0A2440"case "化学":return "#6E97E8"case "生物":return "#1BCB41"case "政治":return "#C01240"case "历史":return "#ff40240Af"}},//字体颜色getcolort(name) {console.log(name, 123);let color = this.textStyle(name)return color},// 背景色getcolorb(name) {let color = this.backStyle(name)return color},// 返回背景样式backStyle(name) {switch (name) {case "数学":return "#F8F6E1"case "语文":return "#E4DFE6"case "英语":return "#E0E4E7"case "化学":return "#E3F7E5"case "生物":return "#E2F5DF"case "政治":return "#F7E1E7"case "历史":return "#F7E1E7"}}},created() {},
}
</script>

<style scoped>
table {border: 1px solid #f3f3f3;
}td {border: 1px solid #f3f3f3;width: 200px;height: 70px;font-size: 12px;
}.time {color: #0d0d0e;text-align: center;font-size: 5px
}.div {display: flex;align-items: center;justify-content: center;flex-direction: column;border-radius: 2px;height: 100%;
}
</style>

vue实现课表，不同课程颜色不同相关推荐

Vue成大学核心课程
作者 | 梦依丹出品 | CSDN(ID:CSDNnews) 继维基媒体正式宣布采用 Vue.js 作为前端JS框架后,随着Vue 被更多企业青睐的同时,国内高校湖南工程职业技术学院正式把 Vue ...
Vue.js学习详细课程系列--共32节（1 / 6）
Vue.js学习课程(1 / 6) 01. 什么是Vue.js? 什么是Vue.js? 官方网站竞争对手技术前提开发工具 02. 从index.html开始知识点 index.html vue ...
Vue.js学习详细课程系列--共32节（4 / 6）
Vue.js学习课程(4 / 6) 19. 表单复选框知识点表单复选框绑定 20. 表单单选按钮知识点表单单选按钮绑定 21. 表单下拉框知识点表单下拉框绑定 22. 表单修饰符知识点 ...
基于java+springboot+mybatis+vue+elementui的健身房课程预约管理系统
项目介绍本健身房课程预约网站系统是针对目前健身信息交流网站的实际需求,从实际工作出发,对过去的健身网站系统存在的问题进行分析,结合计算机系统的结构.概念.模型.原理.方法,在计算机各种优势的情况下, ...
vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
Java基于Springboot+vue的健身房会员课程教练预约系统
文末获取资源,收藏关注不迷路文章目录前言一.研究背景二.研究意义三.主要使用技术四.研究内容五.核心代码六.文章目录前言健身房管理系统的开发背景主要涉及以下几个方面: 健身行业的发 ...
计算机毕业设计Node.js+Vue慧学IT精品课程网站(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
106：vue+openlayers 图片分解成颜色块渲染（代码示例）
第106个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中图片分解,颜色块渲染. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: 注意如 ...
Vue.js学习详细课程系列--共32节（2 / 6）
Vue.js学习课程(2 / 6) 07. 过滤器知识点 filters 08. 计算属性知识点 computed 09. 观察属性知识点 $watch 10. 设定机算属性知识点 sette ...

vue实现课表，不同课程颜色不同

vue实现课表，不同课程颜色不同相关推荐

最新文章

热门文章