vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
更新時間：2022年01月24日 11:20:27 作者：javachen__
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
數(shù)據(jù)加載,插值表達式閃爍問題
1.在公共的css樣式中加入
[v-cloak] {
? ? display: none !important;
}2.在el掛載的標簽上添加
<div class="#app" v-cloak>
? ? <p>{undefined{value.name}}</p>
</div>解決插值表達式渲染數(shù)據(jù)閃動
在使用Vue的時候，經常會用到插值表達式，也就是兩個大括號{{}}的語法，但是有時候會出現(xiàn)如下問題
先看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{mes}}</div>
<script>
var app = new Vue({
el:'#app',
data(){
return{
mes:'helloworld'
}
}
})
</script>
</body>
</html>
出現(xiàn)的問題
瀏覽器瘋狂刷新，在某一瞬間的是內容是這樣的，然后才會顯示為helloworld，會有一個閃動的問題，這其實是因為，如果單純的 <div id="app">{{mes}}</div>一句話，瀏覽器是解析不出來的，而Vue它自己的語法中是去將頁面的{{mes}}給解析出來，呈現(xiàn)出來在瀏覽器中，但在解析這期間是需要時間的，如果電腦運行速度慢，這就會越發(fā)的明顯，如某貴校的電費充值頁面
為了解決這種不友好的問題，Vue官方其實給出了辦法的，使用v-cloak指令
解決方法如下圖
原理就是讓為編譯的給事先隱藏，上面的[v-cloak]指的是屬性選擇器。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)表格分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家分享一篇Vue axios設置訪問基礎路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue3版本中，引入了一個新的函數(shù)，叫做setup。這篇文章將為大家詳細介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下2022-07-07
vue之使用echarts圖表setOption多次很卡問題及解決
這篇文章主要介紹了vue之使用echarts圖表setOption多次很卡問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3中遇到reactive響應式失效的問題記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構建數(shù)據(jù)驅動的Web界面,采用漸進式設計,易于上手,支持組件化開發(fā),核心功能包括響應式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法2024-09-09
electron實現(xiàn)打印功能支持靜默打印、無感打印
使用electron開發(fā)應用遇到了打印小票的功能,實現(xiàn)途中還是幾經波折,下面這篇文章主要給大家介紹了關于electron實現(xiàn)打印功能支持靜默打印、無感打印的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了解決Vue前后端跨域問題的多種方式,本文主要介紹借助解決Vue前后端跨域問題的幾種方式，將會使用axios進行請求需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue通過路由實現(xiàn)頁面刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue源碼解析computed多次訪問會有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問會有死循環(huán)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04