vue中v-cloak解决闪动问题

393 阅读1分钟

使用插值表达式的渲染数据的过程中,会出现dom元素闪动问题,原因是dom加载完毕后,会被重新再次渲染,此效果被用户体检造成影响,如何解决呢? 使用c-cloak可以解决该问题: c-cloak使默认的dom隐藏起来,即使DOM加载完毕,在vue数据没有渲染完毕,dom依然不显示。只有等数据渲染完毕后才会更改显示状态,此时我们就只能看到vue渲染后的DOM界面,可以解决插值表达式的闪动问题。

示例:

<!--- v-cloak的使用 ----->
<div id='app'>
    <div v-cloak>{{msg}}</div>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue"
    }
})
</script>