014 V v-show
本帖最后由 不二如是 于 2018-9-11 10:28 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲v-if、v-else-if、v-else，本次来学习v-show。
v-show的用法与v-if基本一致，只不过v-show改变元素CSS的display属性。
当v-show表达式的值为false，元素隐藏，其实就是加载了内联样式：“display:none”。
创建div：
<div id="myApp">
<p v-show="status === 1">当status为1时才能看到我</p>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
status:2
}
})
</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）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.v-if 若表达式为false 则元素/组件不会被渲染 v-show 只是简单的css切换无聊条件真否都会被编译 v-show适合于频繁切换条件。
2.F 1.v-show无论条件的真假，都会编译，通过改变元素的CSS属性来切换显示状态，用于频繁切换元素的条件；v-if的切换开销大，用于不经常改变的场景，属于真正的条件渲染
2.F，v-show不能用在template元素上 0 1.v-show是变化display属性,v-if是条件渲染，会不断创建销毁DOM结构
2.F 1
页:
[1]