vue中v-show与v-if使用与简单的应用场景
浅层次的讲下使用与区别:此次只针对渲染方向v—show,顾名思义,vue中通过值来判断是否显示加载并显示,v-if,通过值来来判断是否加载,看起来几户一样,具体实现原理不同,简单的讲就是v-show是一直都有将元素加载,只是将元素设置为display,v-if则是判断值是否为真来选择是否加载元素。直白的说,就是如果v-show包含的元素中含有自动执行的方法,即使v-show的对应的值为假不...
·
浅层次的讲下使用与区别:
此次只针对渲染方向
v—show,顾名思义,vue中通过值来判断是否显示加载并显示,
v-if,通过值来来判断是否加载,
看起来几户一样,具体实现原理不同,简单的讲就是v-show是一直都有将元素加载,只是将元素设置为display,v-if则是判断值是否为真来选择是否加载元素。直白的说,就是如果v-show包含的元素中含有自动执行的方法,即使v-show的对应的值为假不展示也会执行,但是如果v-if对应的值为假,则不会进行加载。
//标签部分
<div v-show="isShow">v-show</div>
<div v-if="ifShow">v-if</div>
//数据部分
data(){
return {
isShow:true,
ifShwo:false
}
}
一个简单的应用场景就是列表页与详情页之间切换的时候,通过v-if来决定是否渲染详情页,通过v-show决定是否渲染列表页,这样过可以做到从详情页返回时会到的就是进入详情页前的列表页。
更多推荐
已为社区贡献3条内容
所有评论(0)