014 V v-show

不二如是

                               
登录/注册后可看大图

上一讲v-if、v-else-if、v-else，本次来学习v-show。

v-show的用法与v-if基本一致，只不过v-show改变元素CSS的display属性。

当v-show表达式的值为false，元素隐藏，其实就是加载了内联样式：“display:none”。

创建div：

1. <div id="myApp">
   
2.     <p v-show="status === 1">当status为1时才能看到我</p>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             status:2
   
6.         }
   
7.     })
   
8. </script>

复制代码

绑定v-show的元素由于status不为2，所以被隐藏了。

注意：v-show不能用在template元素上。

v-if是真正的条件渲染，会根据表达式适当地销毁或重建及绑定的事件或子组件。

若表达式为false，则一开始元素/组件不会被渲染，为真才开始变异。

v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。

v-if更适合条件不经常改变的场景（切换开销大），v-show适用于频繁切换条件。

---

课后作业


1、v-show用法和v-if基本一致，区别在哪里？

2、v-show和v-if一样可以用在template元素上（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.v-if 若表达式为false 则元素/组件不会被渲染 v-show 只是简单的css切换无聊条件真否都会被编译 v-show适合于频繁切换条件。
2.F

Ruide

1.v-show无论条件的真假，都会编译，通过改变元素的CSS属性来切换显示状态，用于频繁切换元素的条件；v-if的切换开销大，用于不经常改变的场景，属于真正的条件渲染
2.F，v-show不能用在template元素上

一笙彤

0

suweixuan1998

1.v-show是变化display属性,v-if是条件渲染，会不断创建销毁DOM结构
2.F

jack6666

1