vue中v-cloak的作用和原理解析

vue中v-cloak的作用和原理

1、作用

v-cloak 指令常用在插值表达式的标签中，用于解决当网络加载很慢或者频繁渲染页面时，页面显示出源代码的情况。

所以为了提高用户的体验性，使用指令 v-cloak，搭配着 CSS 一起使用，在加载时隐藏挂载内容，等到加载完毕再显示渲染后的数据。

2、原理

先通过样式隐藏挂载内容，等到数据渲染完成后，v-cloak属性会自动去除，页面会显示最终效果。

3、v-cloak的使用

① 在插值语法所在的标签处加上v-cloak指令

<h1 v-cloak>{{ name }}</h1>

② 在 css 中设置 v-cloak 的属性为 display: none

<style type="text/css">
   [v-cloak] {
      display: none;
   }
</style>

扩展：v-cloak指令的使用

v-cloak的使用场景

v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。

v-cloak的使用

首先，在差值语法所在的标签处加上v-cloak指令

<h3 v-cloak>{{name}}</h3>

然后，在css中设置v-cloak的属性为display为none

<style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>

v-cloak的原理

v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak 属性会被自动去除。

到此这篇关于vue中v-cloak的作用和原理的文章就介绍到这了,更多相关vue v-cloak作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！