VUE课程参考---16、条件渲染v-show
一、总结
一句话总结:
条件渲染指令除了v-if,还有v-show,v-show指令用于根据元素的状态控制元素的显示和隐藏
<div id="app"> <p v-if="ok">{{'v-if:'+msg}}</p> <p v-show="ok">{{'v-show:'+msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '我有一只小毛驴,我永远也不骑', ok: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
博客对应课程的视频位置:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>16、条件渲染v-show</title> 6 </head> 7 <body> 8 <!-- 9 10 条件渲染指令除了v-if,还有v-show,v-show指令用于根据元素的状态控制元素的显示和隐藏 11 12 条件渲染指令v-if和v-show的区别 13 -、v-if是真正的条件渲染,v-if中对应的元素的状态为true的时候,元素才被渲染出来,否则不被渲染 14 -、v-show只是简单的改变元素的display属性,v-show中对应的元素的状态为false时,元素的display属性变为none,所以不被显示 15 16 条件渲染指令v-if和v-show的 性能消耗问题 17 *、v-if指令性能消耗问题:每次元素改变状态,都要被重新渲染,所以元素的切换性能消耗比较大 18 *、v-show指令性能消耗问题:v-show控制的元素最初都会被渲染出来,每次改变状态,只是改变元素的display属性的值,所以元素的初始性能消耗比较大 19 20 条件渲染指令v-if和v-show的使用场景 21 ^、v-if使用场景:很少被切换状态的元素,或者可能永远都不被显示的元素 22 ^、v-show使用场景:被经常切换状态的元素 23 24 25 --> 26 <div id="app"> 27 <p v-if="ok">{{'v-if:'+msg}}</p> 28 <p v-show="ok">{{'v-show:'+msg}}</p> 29 </div> 30 <script src="../js/vue.js"></script> 31 <script> 32 let vm = new Vue({ 33 el: '#app', 34 data: { 35 msg: '我有一只小毛驴,我永远也不骑', 36 ok:true 37 } 38 }); 39 </script> 40 </body> 41 </html>