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的 性能消耗问题来源：oschina
链接：https://my.oschina.net/u/4298434/blog/4281379