vue v-cloak学习

干啥用的？

举个例子

<style>

</style>
<div v-cloak>
  {{ message }}
</div>

结果

image.png

换个姿势

<style>
    [v-cloak] {
  display: none;
}
</style>
<div v-cloak>
  {{ message }}
</div>

结果啥也不显示。

也就是说这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。毕竟这玩意 {{ message }}也不太好看。

当然，实例准备好了就可以显示了。

<style>
    [v-cloak] {
  display: none;
}
</style>
<div id="app" v-cloak>
  {{ message }}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'apple'
        }
    })
</script>

结果

image.png

So easy！