通常搭建vue框架时候，有时候网络问题，会出现一些加载顺序延迟（先加载html内容，若有插值表达式则会先显示{{}},才会显示js的代码），因此有些产品经理为了用户体验友好，就要解决页面闪烁问题。

为此有三种解决办法。

1.在所要添加内容的标签添加v-text

但是这个会遇到一些问题，比如

<div id="box">

    <p v-text="title">标题：</p>

</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<srcipt>

var vm = new Vue({

    el: '#box',

    data: {

        title:'hi vuejs!'

    }

})

</srcipt> 

这时候问题就来了，如果用v-text确实解决了闪烁问题，但是同时把所要添加内容的p标签的“标题”两个字覆盖了。

这时候你可能说也可以解决，比如：

<p v-text="'标题：' + title"></p>

<hr>

<p>标题： <span v-text="title"></span></p>

这确实能改变问题，但是页面的结构却改变了，所以还要一种办法比较好。

2.v-cloak指令移除

步奏如下：1. 不希望出现闪烁的标签设置 v-cloak属性。

2. 设置 style 样式，使用该属性选择器：display:none。

3. 当执行完毕后,vuejs 会把所有有 v-cloak指令移除。

<p v-cloak>{{ title }}</p>

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