vue指令之v-if和v-show

vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载。

v-if

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-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，因为主要区分是涉及到页面的加载性能。

 

posted @ 2021-09-12 15:19  keyeking  阅读(416)  评论(0)  编辑  收藏  举报