一：背景介绍

1、代码可读性差，结构混乱

2、逻辑边界不清晰，封装意识缺乏

3、展示效果不美观

二：案例问题分析以及解决过程

1、代码可读性差，结构混乱

①我们经常说写的代码是让人读的，写每一行代码都要写上注释，要是没有注释，别说读了连看也不想看吧。

②代码结构混乱，没有层次，不能想写哪写哪，想放哪放哪。代码间是有关系的。

以下是调整好的代码结构：

2、逻辑边界不清晰，封装意识缺乏

出现问题：没改之前的代码，是把两个div分开写的，这样可以实现，但是如无必要勿增实体。

方案：

用第一个div把第二个div包了起来，这样也可以实现同样的效果。

3、展示效果不美观

不美观的地方是：活动前边的图标没有与文字对齐。

方案：

给标签附上样式

vertical-align：是用来指定行内元素或表格单元格元素的垂直对齐方式的属性。

height: 1.5em;
vertical-align: -0.3em;

三：总结

1. 对于问题二涉及到的知识点，有div块元素、v-if，而这些知识点是需要我们必须掌握的。
2. 我们写的代码是给人读的，所以在写代码的时候要主要层次，以及是否写了注释。

四：升华

1. 条例清理，层次分明（前提：要先抽象）
2. 要善于分条例、分层次、做结构化
3. 要想学习好，就要学会封装
4. 要做到N+1（在原来的基础上迭代新的知识），1+N（在学习新的知识时，回顾学过的知识）
5. 把学过的知识，编织成知识网
6. 要读出代码的味道
7. 把意义搞得越丰富，越生活，越有味道