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

解决:

  • 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>
Last modification:July 4th, 2020 at 08:44 pm
如果觉得我的文章对你有用,请随意赞赏