解决Vue使用{{}}问题（页面刷新时会闪烁{{}}）

木头脑'Blog

July 4, 2020

1754 views

One comment

831 words

知识分享 Vue

问题一：在使用{{}}页面刷新时会闪烁

解决：

v-text
- 可以使用指令 v-text等价于 {{}} 用于显示内容，但区别在于:
- {{}} 会造成闪烁问题， v-text 不会闪烁
如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理
v-cloak
如果想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理，步骤如下：
- 在被 Vue 管理的模板入口节点上作用 v-cloak 指令。
- 添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}
原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去除，然后就显示出来。

列：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style>
        /*将带有 v-clock 属性的标签隐藏*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 在被 Vue 管理的模板入口节点上作用 v-cloak 指令-->
    <div id="app" v-cloak>
        <!--
用QQ浏览器刷新页面时, {{}} 会有明显闪烁现象,
原因:
是浏览器从上往下依次解析, 会先把 {{ message }} 当作标签体直接先渲染,
然后 Vue 再进行解析 {{ message }} 变成了 message 的值: 'hello mengxuegu'
-->
        <h3>{{ message }}</h3>
        <h3>{{ message }}</h3>
        <h3 v-text="message"></h3>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'hello mengxuegu'
            }
        })
    </script>
</body>

</html>