[笔记][Vue.js]打开Vue.js世界的大门(2)-是或不是，不然就怎样的条件判断

前阵子和朋友在书局逛街的时候，他问了一句话：
「欸！你都是怎么重头学习一个新技术的啊？」
在记忆里，我是这样回答的：
「很简单啊，做就对了！」

没错！

就是这样子，所以第二天的我们继续做下去吧XD

---

条件判断式

一、那该怎么使用if？

在Vue.js中，v-if的使用非常直观，就像以下这样：
HTML

<div id="vueDiv" v-if="status">    {{text}}</div>

JavaScript

let vueData = {    text : 'Hello!Wrold!',    status : true,} let vueDiv = new Vue({    el:'#vueDiv',    data:vueData,})

在HTML中使用v-if="status"去判断status内的资料是true或false，如果是true的话就显示；false则隐藏，不过上述的例子可能看不出什么v-if的作用，以下在console中改变status的值，当值被改变时，Vue.js也会重新繫结判断：

status=true的初始画面，会看到Hello!Wrold!
把status的值变成false，Hello!Wrold!会被隐藏起来。

二、既然有v-if那会不会有v-else-if和v-else？

有的，让我们继续看下去吧！
HTML

<div id="vueDiv" >    <span v-if="status == 'A'">我是小明</span>    <span v-else-if="status == 'B'">我是小华</span>    <span v-else>我是神Q</span></div>

JavaScript

let vueData = {    status : 'A',}let vueDiv = new Vue({    el:'#vueDiv',    data:vueData,})

在上方的HTML用一层div包住了三个span，并透过v-if来绑定status的判断，如果等于A就显示小明；等于B就显示小华；都不是的话显示神Q。如此一来就可以透过程式般的方式去控制目前要显示的DOM，要注意的是v-else-if和v-else都是跟着v-if跑的，如果在他们上面没有v-if，是不会有任何作用的。

另外，Vue.js的条件判断为了更有效率的做切换DOM的动作，如果是目前已经在画面上的DOM，就不会把他移除再建立一个，而是直接改变两个DOM不同的地方而已，官方有举一个例子说明这件事情：
HTML

<div id="vueDiv" >    <input v-if="status" placeholder="输入姓名">    <input v-else="status" placeholder="输入mail">    <input type="button" value="切换输入" @click="changeStatus"></div>

JavaScript

let vueData = {    status : true,}let vueMethods = {    //切换status的值    changeStatus : () =>{        vueData.status ? vueData.status = false : vueData.status = true    }}let vueDiv = new Vue({    el:'#vueDiv',    data:vueData,    methods:vueMethods,})

结果会如下，当他被点击改变status的值后，input的placeholder属性值会变，但是这并不代表他是把input换掉了，就像我刚刚提到的，Vue.js为了提高效能，只会重新绘製不同的地方，这种做法类似于replace()，可以试着把input填入值，在点击按钮切换input会发现我们输入的value不会消失，就是他只替换掉placeholder属性值的最好证明了！
未输入值之前，input的placeholder会改变：

当填入值后，会发现就算切换了value也不会清空或改变：

不过这个方式有好有坏！如果是想要完全独立两个input反而会有点麻烦，所以Vue.js帮大家想了一个方法，那就是使用key去为每个input做一个识别，这样就会重新绘製了！这里只需调整HTML：
HTML

<div id="vueDiv" >    <input v-if="status" placeholder="输入姓名" key="userName">    <input v-else="status" placeholder="输入mail" key="userEmail">    <input type="button" value="切换输入" @click="changeStatus"></div>

没有输入值的结果就和上方一样，直接来看看填入value值后切换吧！

所以大家可以知道v-if的基本用法，还有v-if的切换是会把DOM给移除再新增的！也因为这一点，所以上方的例子才会在从mail的input切回name的input时清空value值，其实也不是清空，只是因为他重新绘製了，所以value的值就不会留着。

三、如果v-if会把DOM给移除，那有没有不移除的方法？

可能有些人会这么想，

这也能当标题？才没人会在乎这个吧！

错！就算真的没人在乎，Vue.js也在乎，于是我们有了v-show这个属性可以用，他的用法和v-if很类似，不过没有分支；只有唯一，来看看吧！
HTML

<!--把以上範例的v-if改成v-show--><div id="vueDiv" >    <input v-show="status" placeholder="输入姓名" key="userName">    <input v-show="status == false" placeholder="输入mail" key="userEmail">    <input type="button" value="切换输入" @click="changeStatus"></div>

JavaScript的部分依然不需要改变，据官方说法v-show是使用CSS去控制他的隐藏和显示，于是我一个好奇去看HTML点击按钮后的变化，哦原来是熟悉的display:none：

知道原理后，应该想像的到运行后的结果，就算是相互切换也不会清掉value的值，毕竟只是透过CSS去隐藏而已：

所以我们可以对这两种用法下个结论(感谢fysh711426大大留言补充)：

使用v-if一开始再载入的画面较少，但是切换画面会重新绘製资料，资料一多会比较吃效能。使用v-show一开始就会先将全部的DOM绘製，切换则是透过CSS去控制，所以在切换时的效能耗损较少。

如果一开始的资料庞大可以选择v-if减少载入时间，但如果觉得切换时会有一些不顺，就可以改用v-show减少切换的效能，以上两个方式在使用上就互相搭配啰！。

---

关于条件判断v-if和v-show的基本用法先告一段落了，其实今天本来要连迴圈一起讲，但是时间有限，明天还要上工XD，所以就一个壮士断腕直接移到明天去，不然我怕赶出来的文章品质也不会很好，希望自己以后再回来看也不会有「天哪！到底再写什么？」的感觉，哈哈哈。

最后感谢各位大大的观看，如果文章中有什么问题、解释不清楚或是理解错误的地方，还请麻烦留言告诉我，谢谢大家