课程内容：
20220813 - 今日学习的内容包括：

第2章 Vue.js基础语法、生命周期与事件

2-9 条件渲染

代码：


解读;
今日事，今日毕。
来，和我一起默念，
今日事，今日毕。
OK，好极了，想必你一定做好了充分的接受新知的准备了，那就开始学习吧~

这里面我定义一个数据项叫做show，它的默认值是true，‍‍然后我在这儿之前给大家讲过一个指令叫做v-if让它等于show，‍‍【第20行】

它的意思是什么？它的意思是只有show变量是true的时候，我这个div标签才会显示，‍‍
到浏览器上刷新，Hello World是展示的，
假设我给它改成false，保存一下，然后过来来看它是不是就没有了？‍‍‍‍

所以v-if它控制的是什么，它控制的是 div 标签的展示与否。‍‍【OK，学完了，该结束了】

那么我们再来看一下底层上的一些东西，打开控制台，我们找到Element元素这一块，‍‍
然后我们打开 id等于root这样的一个节点，【告诉计算机我要干怎么，步骤是什么，就是计算机编程】

它是怎么控制元素的展示或者隐藏的呢？‍‍
v-if它是通过 true 这个元素来控制的，你会发现当你是true的时候，它展示 Hello World，我们刷一下，‍‍

那么这个时候div标签是存在的，如果你是false的时候，它直接就把 dom 移除了，你看，

你看‍‍它下面什么dom结构也没有了，‍‍所以v-if它是通过控制这个元素的在dom上的存在与否来控制它的展示或者隐藏的，‍‍
我们和它做一个类比，还有一个指令，这块我们用v-show，代码如下：

我发现今天我的学习意识超前，积极了，码字到这儿的时候，脑子里已经再想上面的表格的学习收获，我该怎么怎么写，大概的思路已经有了。
不知不觉，是前12天，
什么是不知不觉呢？
就是我没有觉察到，没有意识到 。

自从手记开头加了表格，我在码字的时候心中总是想哎学习收获该怎么写，只是有想法，但是想法还没成型，
等写完了才能总结出来，
这叫后知后觉，就是总是在事情发生过后才反应过来，

第13天，进入先知先决的状态，有点东西。
什么是先知先决？
就是先见之明，事先能想到事情的后果。
等我写到v-show，我突然发现我已经想好了学习收获大概怎么写了。

我想，学习也就这些东西，即 不知不觉—>后知后觉—>先知先觉 一路升级。
这个习惯借鉴到工作中就很神奇。有待开发~

好，继续码字。
上述图片代码做了件事情：
v-if 和 v-show 作对比，
保存一下。‍‍好，现在show 是 true，

功力不够，我应该再想想下一步是 输出结果/预期结果是什么？让自己快编译器一步。记住。
此时，脑子里已经把这点列入到学习收获，明天我就能做到这点。

v-if 和 v-show 应该都展示，刷新页面， Hello Word Bye World，

写小结，把小结汇总到表格，就是收获：
小结：
我们要实现什么目标，或要做什么事情？
要用到哪些知识拼图？
完整的地图的概念我有吗？【架构，下面就是往架构里填空】
如果有，开始拼图，直到拼图完成。
如果没有，边做边拼。直到拼图完成。
就是做事情的大概思路，攻略心中要有数。
预期结果我知道吗？原型图是什么我知道吗？
我做出来的东西实现的效果是否和预期一致？
如果不一致，原因是什么？

继续码字，
现在都展示两个 div标签，没有任何的问题。‍‍但是如果我给它改成false，大家就能看到这两个指令它的区别了，保存，

然后刷新，

我知道自己下一步要干嘛？
问自己为啥div标签不展示了呢？原因是什么？

Hello World 整个dom 元素就不存在了，因为v-if直接是通过dom 的存在与否来控制 Hello World区块的展示与否的，
而图中绿色 <!--v-if-->下面展示了 Bye World，这又是为什么？
而v-show是通过什么来控制的？我们看v-show‍‍ 它控制Bye World，或者说它控制dom元素的展示与否，是通过style样式来控制的，

如果你隐藏‍‍，它把display 的值 置为 none，
但如果你展示 display，display:none 就会给它去掉，

所以这是v-if 和 v-show 两个指令它的差异点。‍‍

v-if 直接就把一些东西从dom上移除了或者增加，‍‍
而v-show 这个东西在dom上一直存在，只不过控制它的display:none 或者display:none不存在，来去控制它的展示和隐藏，‍‍

那么就衍生出这两个指令哪一个好一些？‍‍‍‍
如果我们频繁的要去改变一些dom元素的展示与否的话，那么我建议使用v-show，因为它不会去频繁销毁dom，性能会好一点，
但是如果你不涉及频繁的销毁或者创建的话，‍‍这个时候v-if 和 v-show 都差不多，【新建学习收获记事本，把每一个收获写进去，最后复制到表格中，这是最方便的做法】
如图：【学习技巧】

所以怎么选择这两个指令，大家根据场景去选就行了。‍‍

讲完v-if 和 v-show 之后，我们再讲讲v-if 额外的一些用法，就是v-else。
看v-if 和 v-else 使用的代码实例：

我们写一个条件叫做conditionOne 它的值是true。‍‍

我们希望如果conditionOne是true的话，我就展示if，不是true的话，我就展示这个else，‍‍
v-if 和 v-else是贴在一起的。

那么存在一个if else的关系，在vue里面，我们怎么通过指令来实现?
我们可以这么来写。‍‍

首先v-if等于conditionOne，
然后我们可以在下面直接写一个v-else，‍‍v-else后面就不必加这个show或者conditionOne了，直接这么写就行了：

保存到页面上，刷新‍‍，它显示的是if，

如果我把conditionOne变成false的话，

它展示的就应该是else，没任何的问题：

所以在vue里面，我们可以用这种if else的形式去写一些东西，当然要记得，如果你这么写，if和else要紧紧贴在一起，上下两行贴在一起。

除了写if else之外，‍‍ vue还支持else if ，我们再写个conditionTwo 为 true。‍‍

我们可以再写一个额外的增项。div v-else if等于conditionTwo。‍‍
它的意思是什么？如果肯定conditionOne是 true 的话，那么我就展示if，‍‍
如果conditionOne不是true，那conditionTwo是true的话，我就展示else if，‍‍
否则的话我再展示else，所以它是 if-else if -else这样的一个语法，

在vue的模板里面我们也可以这么去用，‍‍所以条件选择在vue里面是这么去写的。