vue 里面如何做条件判断。 主要讲了v-if 和v-show的区别，区别是什么？ v-if 直接就把一些东西从dom上移除了或者增加， 而v-show 这个东西在dom上一直存在，只不过控制它的display:none 或者display:none不存在，来去控制它的展示和隐藏 v-if 和v-show哪个好一些？ 如果我们频繁的要去改变一些dom元素的展示与否的话， 那么我建议使用v-show，因为它不会去频繁销毁dom，性能会好一点， 但是如果你不涉及频繁的销毁或者创建的话，这个时候v-if 和 v-show 都差不多， 然后拓展了v-if的语法，即v-if —> v-else-if —>v-else，它们要紧紧地贴在一起。 |
|
课程内容：
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里面是这么去写的。
随时随地看视频
热门评论
-
只是为了好玩2022-08-13 0
查看全部评论其实是否学会，取决于我关掉视频能否独立写出代码？
我可以事先在左手边写好需求清单-提示技术点-忍不住看代码，
右边独立编码，
以此来检测自己是否学会。