当前位置:

Vue中的条件渲染

温馨提示:本文共462个字,读完预计2分钟。

Vue中的条件渲染

 v-if和v-show都能一个模板标签是否能在页面显示。

显示时:相同

隐藏时:

v-if:不存在与dom之上

v-show:存在dom之上,以display:none的形式隐藏

v-show不会频繁的把dom从页面上删除或者添加。因此需要频繁的切换使用v-show效率更高。

v-if会在dom页面上添加或者删除。如果运行条件很少改变使用v-if更好

注意,v-show 不支持 <template> 元素,也不支持 v-else。

a除了v-if还有v-else。v-if和v-else要紧贴着使用

除了v-if和v-else还有v-else-if,也需要连在一起

         vue重新渲染时会尽量复用界面上存在的dom,因此下图的用户名切换到邮箱名的时候input的值不会变。因为在切换后vue发现以前的页面有一个input就复用了。

为了解决这个问题可以采用key值的方式。

不复用vue元素的方法:

当dom有key值时,vue会知道是页面上唯一的元素。如果两个dom的key值不一样,vue不会选择复用,会重新渲染。

本文链接:,转发请注明来源!
评论已关闭。