条件渲染|条件渲染 之 v-if 和 v-show 的区别
vue动态显示DOM元素常用 v-if 和 v-show 这两种方式，但这两种是有区别的：
- v-if：当条件为false时，包含v-if指令的元素，根本就不会存在与dom中
- v-show：当条件为false时，v-show只是给元素添加一个行内样 display:none
| 区别 | v-if | v-show |
|---|---|---|
| 实现方式 | 动态地向DOM树内添加或者删除DOM元素 |
设置DOM元素的display样式属性来控制显隐(display="none") |
| 编译过程 | 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) | 控制css进行切换 |
| 编译条件 | 初始值为false就不编译；只有在第一次条件变为真时才开始局部编译 | 在任何条件下（首次条件是否为真）都被编译 |
| 性能消耗 | 不停的销毁和创建（v-if 的初始化较快，但切换代价高） | 只编译一次，保留DOM元素，之后通过控制css来控制显隐 （v-show 初始化慢，但切换成本低，性能更好） |
| 使用场景 | 适合仅切换一次或不频繁切换的场景（应用更广） |
适合频繁切换的场景（不常用） |
Document {{message}}{{message}}eg2:
Document v-if和v-show都能实现元素的隐藏和显示，但v-if是将元素添加到dom或从dom移除，而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示
我有一头小毛驴
我又有一头小毛驴【条件渲染|条件渲染 之 v-if 和 v-show 的区别】拓展：display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:
- display:none ---使该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
- visible:hidden--- 使对象在网页上不可见，即在网页中不占任何的位置。
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai）
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 生活随笔｜好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息