亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

vue中v-cloak的作用和原理

1、作用

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

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

2、原理

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

3、v-cloak的使用

① 在插值語法所在的標(biāo)簽處加上v-cloak指令

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

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

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

擴(kuò)展：v-cloak指令的使用

v-cloak的使用場(chǎng)景

v-cloak指令常常用在插值表達(dá)式的標(biāo)簽中，因?yàn)樗梢越鉀Q當(dāng)網(wǎng)絡(luò)加載很慢時(shí)，或者頻繁渲染時(shí)候，頁面就會(huì)顯示出源代碼的情況。

v-cloak的使用

首先，在差值語法所在的標(biāo)簽處加上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)存中進(jìn)行值的替換，將替換的內(nèi)容再反饋給界面，數(shù)據(jù)渲染完場(chǎng)之后，v-cloak 屬性會(huì)被自動(dòng)去除。

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

相關(guān)文章

最新評(píng)論