//查看html代碼，也有顯示div標簽內容了，如下圖：
===========================================================
v-show指令：
//v-show和v-if的代碼相似，只要改一下指令就行了。
//v-show在頁面中的顯示效果如下： （v-show會把div的display屬性顯示為none的效果）
//在控制台中設置v-show的值為true后，頁面顯示效果如下： （div標簽的display屬性消失了）
//綜上，v-show指令和v-if指令的效果類似，都是讓DOM元素顯示或消失。但兩者也有點區別：v-if設置的DOM元素只有設置的值為true，才會在頁面中加載出來；而v-show設置的DOM元素與display有關，不管display屬性的值為none還是block，都會直接顯示在頁面上，駐留在html代碼之中，通過改變display的值來改變DOM元素的顯示與否。所以v-show的效果會比v-if好，若要顯示/隱藏一個DOM元素，選用v-show最佳
===========================================================
v-else指令：
//因為show的值為false，所以v-if指令不會被執行，而會執行v-else指令，如下圖：
//當修改了show的值為true后，v-if指令就會觸發顯示，反之v-else指令就會消失了，如下圖：
===========================================================
v-else-if指令：
注意：同樣的v-else-if需要和v-if和v-else一起連着用
//因為show的值設置為true，所以v-if指令會顯示（This is A），如下圖：
//當修改show的值后，v-if指令就沒有被顯示了，如下圖： (修改show的值為b后，v-else-if指令就會顯示出來；修改show的值為c后，v-else指令就會顯示出來)
===========================================================
key值：
編寫新的Demo，代碼如下：
//運行代碼效果如下：
//當把true的值設置為true，頁面中會把郵箱名更改為用戶名，但是表單（input）中的內容卻沒有清空。因為，Vue在重新渲染頁面的時候，會盡量嘗試去復用頁面上已經存在的DOM。（即:當顯示郵箱名的時候，已經有了一個input，當切換修改成用戶名的時候，vue會發現以前頁面上也有一個input，所以它的機制會盡量幫助我們復用頁面上的DOM，它會嘗試去復用input，而我們發現input是被復用了，但是input里面的內容卻沒有自動的清空）。所以為了解決這個效果，需要運用到 “key值”
//添加key值，代碼如下：
//運行代碼后，效果如下：
//解釋：當給某個元素標簽一個key值，Vue會知道它是頁面上唯一的元素，如果兩個的key值不一樣，就不會去嘗試復用以前的input標簽了，這是Vue中虛擬DOM的一個div算法里面用到的內容
