vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载。
v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染。
1 <div id="app"> 2 <p v-if="true">我是第一行dom元素</p> 3 <p v-if="false">我是第二行dom元素</p> 4 </div> 5 <script src="./js/vue.js"></script> 6 <script> 7 var vue= new Vue({ 8 el:"#app", 9 data:{ 10 }, 11 methods:{ 12 } 13 }) 14 </script>
此时我们可以看到：
页面中没有<p v-if="false">我是第二行dom元素</p>，通过v-if实现了标签下树。
第一种情况是通过data带有布尔值的进行渲染。
1 <div id="app"> 2 <p v-if="boo">我是第一行dom元素</p> 3 <p v-if="!boo">我是第二行dom元素</p> 4 </div> 5 <script src="js/vue.js"></script> 6 <script> 7 var vue = new Vue({ 8 el: ‘#app‘, 9 data:{ 10 boo: true 11 }, 12 methods:{} 13 }) 14 </script>
此时我们可以看到页面中依旧没有<p v-if="false">我是第二行dom元素</p>。
第二种情况是通过使用表达式进行逻辑判断
1 <div id="app"> 2 <!-- 监听boo的值 --> 3 <p>{{boo}}</p> 4 <!-- 当boo的值等于5的时候再显示 --> 5 <p v-if="boo == 5">我是第一行dom元素</p> 6 <button @click="add">按我加1</button> 7 </div> 8 <script src="js/vue.js"></script> 9 <script> 10 var vue = new Vue({ 11 el: ‘#app‘, 12 data:{ 13 boo: 1 14 }, 15 methods:{ 16 add(){ 17 this.boo++ 18 } 19 } 20 }) 21 </script>
此时可以看到：
v-if的显示根本原理一个是通过对值的隐式转换，一个就是通过对表达式的判断得出的布尔值得来的。
1 <div id="app"> 2 <h2>{{boo}}</h2> 3 <p v-if=‘boo >= 0 && boo <= 5‘>我是5</p> 4 <p v-if=‘boo >= 6 && boo <= 10‘>我是10</p> 5 <p v-if=‘boo >= 11 && boo <= 15‘>我是15</p> 6 <p v-if=‘boo >= 16 && boo <= 20‘>我是20</p> 7 <p v-if="boo > 20">我是大于20</p> 8 <button @click="add">按我加1</button> 9 </div> 10 <script src="js/vue.js"></script> 11 <script> 12 var vue = new Vue({ 13 el: ‘#app‘, 14 data:{ 15 boo: 0 16 }, 17 methods:{ 18 add(){ 19 this.boo++ 20 } 21 } 22 }) 23 </script>
此时可以看到：
上面的代码是通过v-if一层一层进行判断的，实际上是可以通过v-else-if和v-else进行分支判断
1 <p v-if=‘boo >= 0 && boo <= 5‘>我是5</p> 2 <p v-else-if=‘boo >= 6 && boo <= 10‘>我是10</p> 3 <p v-else-if=‘boo >= 11 && boo <= 15‘>我是15</p> 4 <p v-else-if=‘boo >= 16 && boo <= 20‘>我是20</p> 5 <p v-else="boo > 20">我是大于20</p>
注意：v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔
我们在中间插入一个div标签
1 <p v-if=‘boo >= 0 && boo <= 5‘>我是5</p> 2 <div></div> 3 <p v-else-if=‘boo >= 6 && boo <= 10‘>我是10</p> 4 <p v-else-if=‘boo >= 11 && boo <= 15‘>我是15</p> 5 <p v-else-if=‘boo >= 16 && boo <= 20‘>我是20</p> 6 <p v-else="boo > 20">我是大于20</p>
后面的代码便不再显示了
v-show和v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树。
1 <div id="app"> 2 <p>{{boo}}</p> 3 <p v-show=‘boo >= 5‘>我是5</p> 4 <button @click="add">按我加1</button> 5 </div> 6 <script src="js/vue.js"></script> 7 <script> 8 var vue = new Vue({ 9 el: ‘#app‘, 10 data:{ 11 boo: 0 12 }, 13 methods:{ 14 add(){ 15 this.boo++ 16 } 17 } 18 }) 19 </script>
我们可以看到：
p标签的属性为display：none，所以不显示。
什么时候用v-if、什么时候使用v-show
v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show，如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if，因为主要区分是涉及到页面的加载性能。
原文：https://www.cnblogs.com/keyeking/p/15258247.html