代码结构混乱 逻辑边界不清晰 页面美观设计不足
一：背景介绍问题1 代码可读性差，代码结构混乱问题2 逻辑边界不清晰，封装意识缺乏示例3.展示效果上的美观设计 二：思路&方案问题一，代码可读性差，代码结构混乱。问题一方案效果问题二 逻辑边界不清晰，封装意识缺乏示例div块级元素v-if 条件渲染v-elsev-else-if 问题二 方案效果问题三 展示效果上的美观设计问题三 方案效果 四：总结五：升华一：背景介绍
本篇博客是对对项目开发中出现的代码结构混乱、逻辑编写不清晰、页面美观不足进行的总结并进行的改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家，大家一起共同进步和提高。
问题1 代码可读性差，代码结构混乱
问题2 逻辑边界不清晰，封装意识缺乏示例
3.展示效果上的美观设计
二：思路&方案
问题一，代码可读性差，代码结构混乱。
1.可以看出如果对于具体业务不够熟悉，其实是很难知道那一块是干什么的，基本上没有注释，代码可读性太差。
2.代码结构混乱，不够条理清晰和层次分明。
问题一方案
添加足够多的注释，以及对代码结构进行分层。保证从宏观上让读代码的人一看就看出来整个代码是做什么的。效果
代码层次结构相当清晰，代码可读性较强。
问题二 逻辑边界不清晰，封装意识缺乏示例
问题点在于对于v-if 的运用没有足够的了解，导致逻辑边界不清晰以及div的运用不够了解，导致没有体会到和使用到封装。div块级元素
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
标签可以把文档分割为独立的、不同的部分，具有封装的思想。
特点
块级元素：
霸占一行，不能与其他任何元素并列。
能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
v-if 条件渲染
基于表达式值的真假性，来条件性地渲染元素或者模板片段。
详细信息
当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
可用于 表示仅包含文本或多个元素的条件块。
当条件改变时会触发过渡效果。
当同时使用时，v-if 比 v-for 优先级更高。
v-else
表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。不需要传入表达式
详细信息
上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。
示例
<div v-if="Math.random() > 0.5">Now you see me</div><div v-else>Now you don't</div>
v-else-if
表示 v-if 的“else if 块”。可以进行链式调用。
详细信息
限定：上一个兄弟元素必须有 v-if 或 v-else-if。
可用于 表示仅包含文本或多个元素的条件块。
示例
<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
问题二 方案
根据div块级元素封装性，可以将用一个div标签将81行的代码与89行的代码封装起来，再通过一个v-if进行判断，一样可以完成功能。这样做的好处是能够很好的提高封装性，以及代码简洁逻辑明确。
效果
问题三 展示效果上的美观设计
问题点在于前面的圆圈没有与字进行对齐。对于用户来说体验较差，虽然差别很小但是看着很别扭。
问题三 方案
只需要将< img>标签与< span>标签对齐就可以解决美观问题。
给< img>标签附上样式
height: 1.5em;vertical-align: -0.3em;
效果
四：总结
1.对于问题三的解决方案，应该还有更好的处理方式，如将< img>标签放入到< span>标签中应该也可以解决这个问题，但是博主没有进行验证。
2. 对例如div 以及 v-if这类基础知识点需要进行掌握，还有可能写出符合逻辑以及封装性强的代码。
3. 对于代码的整洁度，结构性，一直都是诟病的问题。好的代码不仅需要自己看懂，也需要别人欣赏。
