溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.js 使用v-cloak后仍顯示變量的解決方法
v-cloak 這個指令是防止頁面加載時出現 vuejs 的變量名而設計的，但有時候添加了這個指令仍會顯示變量，這是怎么回事呢？。
v-cloak 用法：
HTML代碼：
<div v-cloak>
{{ message }}
</div>
CSS代碼：
[v-cloak] {
display: none;
}
這樣直至div內變量編譯完畢后才會顯示。
但有時添加完畢后仍有部分變量會顯示，這是怎么回事呢？通過控制臺查看，原來是 v-cloak 的display屬性被優先級別高的樣式覆蓋所導致，我的處理方案是添加 !important ，簡單粗暴。新css樣式如下：
[v-cloak] {
display:none !important;
}
經測試，并不會產生副作用。如果大家有更好的方案，歡迎交流。相關截圖如下：
未使用 !important 前的截圖
相關鏈接：
1. Vue.js 1.0官網 v-cloak說明
總結
以上所述是小編給大家介紹的Vue.js 使用v-cloak后仍顯示變量的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
