Vue.js数据双向绑定渲染一个表格

作者: Rememberautumn 分类: 未分类 发布时间: 2015-12-05 21:58 阅读: 20,734

如果你还不知道vue是什么,那么请看这篇文章 vue.js

我想要实现的是一个课程表页面,也就是一个table,如下图

Screenshot_2015-12-05-21-45-05

 

由于年(da)轻(er)的时候很天(sha)真(bi),把所有的课程存在了一个惨不忍睹的数据库里面,去出来的数据是一个数组,好吧。

列表,有行有列,所以刚开始打算手写几个tr,然后tr里面的td用vue渲染,可是这样写貌似不怎么好,vue里面有个vue-for属性,那么肯定是可以嵌套循环的,于是成了下面这个样子。

使用了两个for循环,第一个有6行,第二个for是7列,这样就绘制出来了一个表格,然后计算出课程数组的id,

为了能给每个表格随机的匹配颜色,我还生成了一个随机数组,好像这样实现有些二。

实现之后就是这样子的了。

html

JS

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

2条评论
  • 学生

    2017年7月18日 09:55

    哥 有没有完整包括后台的代码 谢谢!

  • dafs

    2017年9月12日 09:52

    写什么鬼,代码拷贝后也不能用

发表评论

电子邮件地址不会被公开。 必填项已用*标注