一、知识点
vue指令
- v-show
- v-if
二、代码案例
v-show
<div v-show="isShow">动态显示或隐藏</div> <!-- 绑定isShow-->
data:{
isShow:true //isshow的状态设为true(显示)
}
v-if
<div v-if="isCreate">动态创建和删除</div> <!-- 绑定isCreate-->
data:{
isCreate:true //isCreate的状态设为true(创建)
}
三、v-show与v-if的区别
1. v-show会生成所有的标签,v-if只生成值为true的标签
当v-show的代码如下时:
运行结果为:
也就是说运行后条件为false的标签还是生成了,只不过让其display的属性
为none,让他隐藏起来了
当v-if的代码如下时:
运行结果为:
所以说运行后只有条件为true的标签生成,条件为false的标签并不会生成
2. v-show根据状态(true或false)来显示隐藏标签,v-if根据状态(true或false)来创建删除标签
从上面可以我们可以知道当值为true时,v-show和v-if是可以显示的
代码:
显示结果:
那么当v-show和v-if的值从true变为false时(这里直接从浏览器控制台修改值)
输出结果为:(一片空白~~)
意料之中对吧,值为false大家都没有输出,我们来看看原理
我们可以看出v-show的标签还是老套路被隐藏了,而v-if的标签则是被删除了,所以都没有显示
四、结论
- v-show会生成所有的标签,v-if只生成值为true的标签
- v-show 根据状态(true 或 false)来显示隐藏标签,v-if 根据状态(true 或 false)来创建删除标签