欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年09月21日 11:54:07   作者：小草莓蹦蹦跳  
v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧

vue中v-cloak的作用和原理

1、作用

v-cloak 指令常用在插值表達式的標簽中，用于解決當(dāng)網(wǎng)絡(luò)加載很慢或者頻繁渲染頁面時，頁面顯示出源代碼的情況。

所以為了提高用戶的體驗性，使用指令 v-cloak，搭配著 CSS 一起使用，在加載時隱藏掛載內(nèi)容，等到加載完畢再顯示渲染后的數(shù)據(jù)。

2、原理

先通過樣式隱藏掛載內(nèi)容，等到數(shù)據(jù)渲染完成后，v-cloak屬性會自動去除，頁面會顯示最終效果。

3、v-cloak的使用

① 在插值語法所在的標簽處加上v-cloak指令

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

② 在 css 中設(shè)置 v-cloak 的屬性為 display: none

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

擴展：v-cloak指令的使用

v-cloak的使用場景

v-cloak指令常常用在插值表達式的標簽中，因為它可以解決當(dāng)網(wǎng)絡(luò)加載很慢時，或者頻繁渲染時候，頁面就會顯示出源代碼的情況。

v-cloak的使用

首先，在差值語法所在的標簽處加上v-cloak指令

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

然后，在css中設(shè)置v-cloak的屬性為display為none

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

v-cloak的原理

v-cloak原理是先通過樣式隱藏內(nèi)容，然后在內(nèi)存中進行值的替換，將替換的內(nèi)容再反饋給界面，數(shù)據(jù)渲染完場之后，v-cloak 屬性會被自動去除。

到此這篇關(guān)于vue中v-cloak的作用和原理的文章就介紹到這了,更多相關(guān)vue v-cloak作用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論