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的性能要高那么一点点。
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14958418.html