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>
