div设置高度 vue_19岁小伙开发日记：先熟悉Vue.js框架，然后再编写后台界面

关注《高手杰瑞》获取更多精彩资讯

---

今日任务

大家好！我是《编程高手杰瑞》，前些天曾在视频里面说过我在暑假打算能独立开发一个平台，而今天则是杰瑞独立开发的第二天。

杰瑞打算先把系统后台界面给做出来，然后在开始去制作其他部分。在这个系统后台这一部分，杰瑞使用了Vue.js框架，该框架在之前都没有用过，但好在杰瑞之前有做过小程序开发，所以Vue.js用起来还是比较得心应手的。

今日主要任务是熟系Vue.js并制作“数据分析”模块。

数据分析模块——柱形图

根据业务需要，杰瑞要在后台制作一个数据分析模块，其中有一项为统计“用户数量”的功能，该功能需要将平台中的用户数量变化以柱形图的方式显示出来，并且分为年、月、日三类。

设计思路：

柱形图的实现非常的简单，每一个柱形都可看成是一个长方形的div，仅需要保持它们的宽度一样，分别设置高度就行了。

以月分类举例：

我们一共需要12个div来表示我们的柱形，所以杰瑞这里使用Vue.js的列表循环来渲染这12个柱形。

高度如何设置呢？在这里我们使用样式绑定来更改高度，列表渲染中的数组元素来充当高度。

这里问题就来了：每天、每月、每周的数据大小不一，我们如何将这些数据映射为div元素的高度呢？

如果直接将数据大小作为元素高度的话会出现一些问题，例如：如果某月的用户数量达到了10万呢？直接将10万这个数字作为元素高度的话，恐怕整个屏幕都容不下了！

所以，我们需要将这些数据按照某种规则映射到一个范围之内，在这里杰瑞对这些数据进行了“归一化”，将这些数值缩放到[0 ， 280]这个范围内，因为我们的元素高度只能在0~280这个区间内。

以下是转换函数：

柱形图设计完之后，我们还需要分成：年、月、日类

在这里杰瑞直接使用三个单选框和v-if 指令来实现类别的转换。

效果

总结

首次使用Vue.js感觉和小程序的设计模式是差不多的，只不过并没有过多的使用过Vue.js这个框架，导致杰瑞今天出现了一个小错误。

这个错误就是在动态修改统计图高度的时候，在data对象里面的数据已经改变，并且通过控制台也能看到数据发生改变的情况下，DOM的渲染并没有相应的更新，而在杰瑞自己查看文档后发现，在Vue中，一些比较深层的数组操作，Vue是检测不到的，这就导致了DOM无法进行实时更新，而解决这一问题的办法就是使用Vue.js官方推荐的Vue.set()方法。