移动端VUE实现一周课程表

效果图

点击课程弹出课程详情

代码

使用嵌套的v-for循环去实现

<template><div class="class-table"><div class="table-wrapper"><div class="tabel-container"><table><thead><tr><th style="width:50px;">时间</th><th v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">{{lesson}}</th></tr></thead><tbody><!--<tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">--><tr v-for="(weekNum, weekIndex) in classTableData.weeks" :key="weekIndex"><td><p>{{'周' + weekNum}}</p></td><td class="courses" v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex"><div  v-for="(course, courseIndex) in classTableData.courses[weekIndex][lessonIndex]" :class="{bgColor:courseIndex%2===1}" :key="courseIndex" class="course" @click="detail"><p style="font-size: 11px;">{{course}}</p><p style="font-size: 8px;color: #eee">8:00-9:30</p></div><!--{{classTableData.courses[courseIndex][weekIndex] || '-'}}--></td></tr></tbody></table></div></div></div>
</template><script>import { Dialog } from 'vant';export default {data() {return {classTableData: {lessons: ['上午','下午','晚上'],weeks: ['六','日','一','二','三','四','五'],courses: [[[], [], []],[['生物','地理','化学'], ['物理'],[]],[[], [], []],[['生物'], ['物理','生物'], ['化学']],[[], [], []],[['生物'], ['物理'], ['化学']],[[], ['地理','化学'], []],]}};},  methods: {detail(){Dialog.alert({title: '硬笔书法',message: '周日 上午 8:00-9:30<br/>主讲教师：张三'}).then(() => {// on close});}}};
</script><style scoped>*{margin: 0;padding: 0;}.table-wrapper {width: 100%;overflow: auto;margin-bottom: 60px;}table {table-layout: fixed;width: 100%;}thead {background-color: #547c99;}th {color: #fff;line-height: 15px;font-weight: normal;}tbody {background-color: #f9f9f9;}td {color: #677998;line-height: 15px;}th, td {padding: 8px 2px;font-size: 15px;text-align: center;}tbody tr:nth-child(2n){background-color: #ecf4f4;}tr td:first-child {color: #333;}.course{background-color: #ebbbbb;color: #fff;display: inline-block;border-radius: 3px;width: 47%;margin: 1px 1%;}.bgColor{background-color: #89B2E5;}
</style>

移动端VUE实现一周课程表相关推荐

Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
服务端的第六周第二次的课程
2021.4.8 服务端的第六周的课程 1:复习 docker run -P 会调一个端口 docker port 指定的名字,端口和进程的对应关系列出来 docker run --name 起一个名 ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
vant官网-vant ui 首页-移动端Vue组件库
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面. 鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址https://vant-co ...
移动端 vue 个人组件库
简介一套实用.精致的个人组件库,组件以封装功能为主,以使用简单.灵活为设计理念. 组件演示连接 http://test.gkshwap.com/joce 如何安装下载 https://github ...
移动端Vue项目a标签点击事件无效
移动端Vue项目a标签点击事件无效近期项目出现了部分机型点击无效的现象,后来定位到原来是a标签的问题,将a标签更换为div标签,加宽加高点击范围,就可以解决这个问题. // a标签点击事件不生效 & ...
vant 1.6.6 发布，轻量级移动端 Vue 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> vant 1.6.6 已发布.Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库.通过 Va ...

移动端VUE实现一周课程表

效果图

代码

移动端VUE实现一周课程表相关推荐

最新文章

热门文章