Vuejs学习笔记(一)-11.v-if条件判断的使用及与v-show的比较

一、v-if判断指令的基本使用

v-if v-else v-else-if

可以在标签中使用这些指令，vue会根据其值判断标签是否在界面渲染。同样也可以使用计算属性，无需在标签上写过多的逻辑判断

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>01 v-if,v-else,v-else-if的使用</title>
 6 </head>
 7 <body>
 8 <!--一般复杂逻辑不直接在标签中写if else,在computed中或则methods中写更加方便，如果只是很简单的逻辑可以写在标签中-->
 9 <div id="app">
10   <h2 v-if="score>=90">优秀</h2>
11   <h2 v-else-if="score>=80">良好</h2>
12   <h2 v-else-if="score>=60">及格</h2>
13   <h2 v-else>不及格</h2>
14   <h2>{{ result }}</h2>
15 </div>
16 </body>
17 <script src='../js/vue.js'>
18 </script>
19 
20 <script>
21   const app = new Vue({
22     el: '#app',
23     data: {
24       message: 'hello',
25       score: 90,
26     },
27     computed: {
28       result: function () {
29         let showMsg = '';
30         if (this.score >= 90) {
31           showMsg = '优秀';
32         } else if (this.score >= 80) {
33           showMsg = '良好';
34         } else if (this.score >= 60) {
35           showMsg = '及格';
36         } else {
37           showMsg = '不及格';
38         }
39         return showMsg;
40       }
41     }
42   })
43 </script>
44 </html>

 

二、v-if使用过程中的一个问题

如下代码

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 02-v-if的一个小问题.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 13:56
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>02-v-if的一个小问题</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <span v-if="isUsername">
21     <label for="username">用户账号</label>
22     <input type="text" id="username" placeholder="用户账号">
23     //placeholder表示输入框的水印
24     //label的for和input的id是绑定联系
25   </span>
26   <span v-else>
27     <label for="email">用户邮箱</label>
28     <input type="text" id="email" placeholder="用户邮箱">
29   </span>
30   <button @click="btnClick">切换登录方式</button>
31 </div>
32 
33 <script src="../js/vue.js"></script>
34 <script>
35 
36   const app = new Vue({
37     el: '#app',
38     data: {
39       message: 'hello v-if',
40       isUsername:true
41     },
42     methods:{
43       btnClick(){
44         this.isUsername = !this.isUsername
45       }
46     }
47   })
48 </script>
49 </body>
50 </html>

以上代码有一个问题，就是切换登录方式时，之前输入框内的值没有清空。这个涉及到vue的实现原理。

vue在读取html代码时，会先将html渲染成一个虚拟dom。然后下次渲染时，不会重新渲染，而是先去虚拟dom中找有以前有没有渲染过,如果渲染过，则直接加载虚拟dom中的渲染元素到页面。本case中v-if下的元素和v-else下的元素一模一样，但是没有value属性。所以加载虚拟dom时直接把原来value属性中的值拿过来使用。输入的内容不会变动。为了解决这个问题，使用key属性。代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 02-v-if的一个小问题.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 13:56
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>02-v-if的一个小问题</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <span v-if="isUsername">
21     <label for="username">用户账号</label>
22     <input type="text" id="username" placeholder="用户账号" key="username">
23     //placeholder表示输入框的水印
24     //label的for和input的id是绑定联系
25   </span>
26   <span v-else>
27     <label for="email">用户邮箱</label>
28     <input type="text" id="email" placeholder="用户邮箱" key="email">
29   </span>
30   <button @click="btnClick">切换登录方式</button>
31 </div>
32 
33 <script src="../js/vue.js"></script>
34 <script>
35 
36   const app = new Vue({
37     el: '#app',
38     data: {
39       message: 'hello v-if',
40       isUsername:true
41     },
42     methods:{
43       btnClick(){
44         this.isUsername = !this.isUsername
45       }
46     }
47   })
48 </script>
49 </body>
50 </html>

 

 三、v-show指令与v-if指令的比较

这2个指令都是根据boolean值来判断是否显示，区别在于

v-if为false,则在页面不会渲染该dom

v-show为false，在页面会渲染该dom，只不过将该dom的display属性设置为none.

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-v-show的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/1 14:12
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-v-show的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <button @click="btnClick">去控制台检查是否显示</button>
21   <h2 v-if="isShow">v-if从不显示到显示，需要重新渲染，不显示时页面不会有该元素</h2>
22   <h2 v-show="isShow">v-show从不显示到显示，无需重新渲染,只是设置了display属性为none</h2>
23 </div>
24 
25 <script src="../js/vue.js"></script>
26 <script>
27 
28   const app = new Vue({
29     el: '#app',
30     data: {
31       message: 'hello v-show',
32       isShow: true
33     },
34     methods: {
35       btnClick() {
36         this.isShow = !this.isShow
37       }
38     }
39 
40   })
41 </script>
42 </body>
43 </html>

 由此逻辑可见，v-show的性能比v-if的性能要高那么一点点。

 

posted @ 2021-07-01 13:46  kaer_invoker  阅读(715)  评论(0)  编辑  收藏  举报