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>