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>