VUE课程---20、条件渲染v-show
一、总结
一句话总结：
条件渲染指令除了v-if，还有v-show，v-show指令通过改变元素的display属性来控制元素的显示和隐藏
<div id="app"> <p v-if="flag">{{msg}}---v-if控制</p> <p v-show="flag">{{msg}}---v-show控制</p> <button @click="flag=!flag">toggle</button> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app', //element data:{ msg:'欢迎来到vue的世界', flag:true } }); </script>
1、条件渲染指令v-if和v-show的区别？
-、v-if是真正的条件渲染，v-if中对应的元素的状态为true的时候，元素才被渲染出来，否则不被渲染
-、v-show只是简单的改变元素的display属性，v-show中对应的元素的状态为false时，元素的display属性变为none，所以不被显示
2、条件渲染指令v-if和v-show的 性能消耗问题？
*、v-if指令性能消耗问题：每次元素改变状态，都要被重新渲染，所以元素的切换性能消耗比较大
*、v-show指令性能消耗问题：v-show控制的元素最初都会被渲染出来，每次改变状态，只是改变元素的display属性的值，所以元素的初始性能消耗比较大
3、条件渲染指令v-if和v-show的使用场景？
^、v-if使用场景：很少被切换状态的元素，或者可能永远都不被显示的元素
^、v-show使用场景：经常切换状态的元素
二、条件渲染v-show
博客对应课程的视频位置：20、条件渲染v-show
https://www.fanrenyi.com/video/26/237
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>条件渲染v-show</title> 6 </head> 7 <body> 8 <!-- 9 条件渲染指令除了v-if，还有v-show，v-show指令通过改变元素的display属性来控制元素的显示和隐藏 10 11 条件渲染指令v-if和v-show的区别 12 -、v-if是真正的条件渲染，v-if中对应的元素的状态为true的时候，元素才被渲染出来，否则不被渲染 13 -、v-show只是简单的改变元素的display属性，v-show中对应的元素的状态为false时，元素的display属性变为none，所以不被显示 14 15 条件渲染指令v-if和v-show的 性能消耗问题 16 *、v-if指令性能消耗问题：每次元素改变状态，都要被重新渲染，所以元素的切换性能消耗比较大 17 *、v-show指令性能消耗问题：v-show控制的元素最初都会被渲染出来，每次改变状态，只是改变元素的display属性的值，所以元素的初始性能消耗比较大 18 19 条件渲染指令v-if和v-show的使用场景 20 ^、v-if使用场景：很少被切换状态的元素，或者可能永远都不被显示的元素 21 ^、v-show使用场景：经常切换状态的元素 22 --> 23 <div id="app"> 24 <!-- 25 v-if指令和v-show指令的区别 26 v-if指令通过状态来控制元素的显示和隐藏是直接通过操作dom来添加或者移除元素来实现的 27 v-if指令的初始消耗比较小，切换消耗比较大 28 适用场景：可能永远都不被显示的元素，或者很少切换状态的元素 29 30 31 v-show指令控制元素的显示和隐藏是通过改变元素的display属性 32 所以v-show控制的元素最开始就要被加载出来，所以这样v-show指令的初始消耗就比较大， 33 所以切换消耗比较小 34 适应的场景：切换状态比较频繁的元素 35 --> 36 <p v-if="flag">{{msg}}---v-if控制</p> 37 <p v-show="flag">{{msg}}---v-show控制</p> 38 <!-- <button @click="toggle">toggle</button>--> 39 <button @click="flag=!flag">toggle</button> 40 </div> 41 <script src="../js/vue.js"></script> 42 <script> 43 let vm=new Vue({ 44 el:'#app', //element 45 data:{ 46 msg:'欢迎来到vue的世界', 47 flag:true 48 }, 49 methods:{ 50 toggle(){ 51 this.flag=!this.flag; 52 } 53 } 54 }); 55 </script> 56 </body> 57 </html>
条件渲染指令v-if和v-show的 性能消耗问题