v-show指令
v-show指令是控制元素的display屬性判斷是否顯示的，當v-show的屬性值是true的時候，元素進行顯示，否則是不顯示
v-show是根據表達式的真假值切換元素的displayCSS屬性（根據表達式得出的布爾值進行判斷）
v-if指令
v-if是通過控制標簽是否存在於頁面上決定是否顯示的，當v-if的屬性值是true的時候，元素進行顯示，否則是不顯示
指令v-slse-if和指令v-else前面必須具有v-if才可以進行使用；並且在整個if語句中中間不能含有其他語句
v-if和v-show的差別是什么？
1.v-show通過控制標簽的display屬性來控制標簽是否顯示的.當為false時，設置為none，當為true,采用標簽原來的display屬性。
2.v-if通過控制標簽是否存在於dom中來控制標簽是否顯示
3.v-show有更高的初始化開銷，v-if有更高的切換開銷。
if系列指令：控制元素是否渲染
如果沒有被渲染，則對應的元素在瀏覽器審核元素中是找不到的
show系列指令：控制元素是否顯示
如果其值是true或者條件轉化成bool后等同於true的時候，則顯示對應的元素（display:block），否則隱藏對應的元素（display:none）
區別：
在流程上，渲染是優先於顯示的，也就是說元素如果要想被看到，應該先被渲染，然后才顯示。
如果對應的元素后期還想通過JavaScript進行邏輯控制，讓用戶能夠看到，則優先考慮v-show否則考慮v-if系列。
<body> <div id='app'> <!--使用指令v-show --> <div v-show="show"> 這是通過Vue實例中的數據進行決定是否顯示 </div> <div v-show="isShow > 18">通過表達式進行判斷此元素是否顯示</div> <!-- 使用指令v-if判斷現在的時間段 --> <div v-if="time > 8 && time < 10">現在是8-10點</div> <div v-else-if="time >= 10 && time < 12">現在是10-12點</div> <div v-else-if="time >= 12 && time < 14">現在是12-14點</div> <div v-else-if="time >= 14 && time < 16">現在是14-16點</div> <div v-else>顯示是其他時間段</div> </div> </body> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> <script> new Vue({ el: '#app', data: { show:true, isShow:10, time:13, }, }) </script>