参考书籍《Vue.js快跑:构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-4v-if 和 v-show

区别:

  1. v-if指令的值为假,那么这个元素不会被插入DOM。
  2. 和v-show指令比较一下,该指令使用CSS样式控制元素的显示/隐藏。

<!-- 以下代码会输出
<div>one</div> -->
<div v-if="ture">one</div> <div v-if="false">two</div>
 
<!-- 以下代码会输出
<div>one</div>
<div style="display: none">two</div> -->
<div v-show="ture">one</div> <div v-show="false">two</div>
 

注意:使用v-if隐藏的内部元素不会被显示,Vue不会尝试生成对应的HTML代码

原文地址:https://www.cnblogs.com/cuilichao/p/14893197.html