vue加載時閃現模板語法-處理方法

問題:使用VUE時,頁面加載瞬間,會閃現模板語法,例如{{ item.name }}等

解決辦法:

1、可以通過VUE內置的指令v-cloak解決這個問題(推薦)

具體實現:

<ul v-cloak v-for="item in items">

<li>{{ item.name }}</li>

</ul>

CSS中添加

[v-cloak]{ display: none; }

在vuejs指令中有?v-cloak?,這個指令保持在元素上直到關聯實力結束編譯。和CSS規則如?[v-cloak]{display:none}?一起用時,這個指令可以隱藏未編譯的Mustache標簽直到實例準備完畢。用法如下:

[v-cloak]{display:none;
}
<div v-cloak>{{message}}</div>

這樣?<div>?不會顯示,直到編譯結束


2、可以在需要編譯的元素前后加上<template></template>

3、通過切換需要編譯元素的display屬性,最開始設為none,請求完數據后設為block

4、VUE前置加載


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247738.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247738.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247738.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java數組 —(8)

1.數組的創建與元素賦值&#xff1a; 楊輝三角&#xff08;二維數組&#xff09;、回形數&#xff08;二維數組&#xff09;、6個數&#xff0c;1-30之間隨機生成且不重復。 2.針對于數值型的數組&#xff1a; 最大值、最小值、總和、平均數等 3.數組的賦值與復制 int[] a…

idea啟動tomcat時報錯:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 這個很多人都找不出來&#xff0c;原因無非2個&#xff1a; 一、jar 包有有些沒能識別&#xff0c;tomcat沒有配置好&#xff01; 二、這個一般代碼錯了&#xff1a; 除了看 server 的報錯&#xff0c;別忘了看…

java運算符 —(9)

1.理解&#xff1a; ① 定義在java.util包下。 ② Arrays:提供了很多操作數組的方法。 2.使用&#xff1a; //1.boolean equals(int[] a,int[] b):判斷兩個數組是否相等。int[] arr1 new int[]{1,2,3,4};int[] arr2 new int[]{1,3,2,4};boolean isEquals Arrays.equals(a…

css 三角角標樣式

.sanjiao {width: 0px;height: 0px;overflow: hidden;border-width: 100px;border-color: red transparent transparent transparent; border-style: solid dashed dashed dashed; }

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一個正整數都可以表示為4個以內整數的平方和。 如果一個數含有因子4&#xff0c;那么我們可以把4都去掉&#xff0c;并不影響結果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的結果都相同。 如果一個數除以8余7&#xff0…

java類與對象 —(10)

1.面向對象學習的三條主線&#xff1a; 1.Java類及類的成員&#xff1a;屬性、方法、構造器&#xff1b;代碼塊、內部類2.面向對象的大特征&#xff1a;封裝性、繼承性、多態性、(抽象性)3.其它關鍵字&#xff1a;this、super、static、final、abstract、interface、package、…

RESTful API 編寫規范

基于一些不錯的RESTful開發組件&#xff0c;可以快速的開發出不錯的RESTful API&#xff0c;但如果不了解開發規范的、健壯的RESTful API的基本面&#xff0c;即便優秀的RESTful開發組件擺在面前&#xff0c;也無法很好的理解和使用。下文Gevin結合自己的實踐經驗&#xff0c;整…

Python2與Python3的區別

Python2與Python3的區別 1) 核心類差異 Python3 對 Unicode 字符的原生支持。 Python2 中使用 ASCII 碼作為默認編碼方式導致 string 有兩種類型 str 和 unicode&#xff0c;Python3 只 支持 unicode 的 string。Python2 和 Python3 字節和字符對應關系為&#xff1a; python2p…

JavaScript-內存空間

深入了解js這門語言后&#xff0c;才發現它有著諸多眾所周知的難點&#xff08;例如&#xff1a;閉包、原型鏈、內存空間等&#xff09;。有的是因為js的設計缺陷導致的&#xff0c;而有的則是js的優點。不管如何&#xff0c;總需要去學會它們&#xff0c;在學習過程中我覺得只…

java類的結構1: 屬性 —(11)

類的設計中&#xff0c;兩個重要結構之一&#xff1a;屬性 對比&#xff1a;屬性 vs 局部變量 1.相同點&#xff1a; 1.1 定義變量的格式&#xff1a;數據類型 變量名 變量值1.2 先聲明&#xff0c;后使用1.3 變量都其對應的作用域 2.不同點&#xff1a; 2.1 在類中聲明的…

GXU - 7D - 區間求和 - 前綴和

https://oj.gxu.edu.cn/contest/7/problem/D 描述 有一個所有元素皆為0的數組A&#xff0c;有兩種操作&#xff1a; 1 l r x表示將A區間[l,r]內所有數加上x&#xff1b; 2 l r表示將A區間[l,r]內從左往右數第i個數加上i&#xff1b; 給出m個操作&#xff0c;請輸出操作結束后A中…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 從第一個元素開始&#xff0c;該元素可以認為已經被排序 2. 取出下一個元素&#xff0c;在已經排序的元素序列中從后向前掃描 3. 如果該元素&#xff08;已排序&#xff09;大于新元素&#xff0c;將該元素移到下一位置 4. 重復步驟 3&am…

DPDK并行計算

參考文獻&#xff1a; 《深入淺出DPDK》 https://www.cnblogs.com/LubinLew/p/cpu_affinity.html ...................................................................... 前言&#xff1a; 處理器提高性能主要是通過兩個途徑&#xff0c;一個是提高IPC&#xff08;CPU每一時…

Highcharts圖表-ajax-獲取json數據生成圖表

重點說明此代碼是針對一個報表顯示多個項對比顯示。 直接貼代碼&#xff1a;web端 <script type"text/JavaScript" src"js/jQuery/jquery-1.7.2.js"></script> <script type"text/javascript" src"j…

關于RGBDSLAMV2學習、安裝、調試過程

Step&#xff11;&#xff1a;https://github.com/felixendres/rgbdslam_v2/wiki/Instructions-for-Compiling-Rgbdslam-(V2)-on-a-Fresh-Ubuntu-16.04-Install-(Ros-Kinetic)-in-Virtualbox 照著這個instructions安裝好 rgbdslamv2&#xff0c;并且在安裝的過程中&#xff0c;…

Java—List的用法與實例詳解

List特點和常用方法 List是有序、可重復的容器。 有序指的是&#xff1a;List中每個元素都有索引標記。可以根據元素的索引標記&#xff08;在List中的位置&#xff09;訪問元素&#xff0c;從而精確控制這些元素。 可重復指的是&#xff1a;List允許加入重復的元素。更確切地講…

Java—遍歷集合的N種方式總結Collections工具類

遍歷集合的N種方式總結 【示例1】遍歷List方法1&#xff0c;使用普通for循環 for(int i0;i<list.size();i){ //list為集合的對象名 String temp (String)list.get(i); System.out.println(temp); } 【示例2】遍歷List方法2&#xff0c;使用增強for循環(使用泛型定義…

java類的結構2: 方法—(12)

面向對象的特征一&#xff1a;封裝與隱藏 1.為什么要引入封裝性&#xff1f; 我們程序設計追求“高內聚&#xff0c;低耦合”。 高內聚 &#xff1a;類的內部數據操作細節自己完成&#xff0c;不允許外部干涉&#xff1b; 低耦合 &#xff1a;僅對外暴露少量的方法用于使用。…

Docker 環境下部署 redash

環境&#xff1a; centos7 官網&#xff1a;https://redash.io/help/open-source/dev-guide/docker 一、安裝步驟 1、虛擬機安裝 安裝vmware&#xff0c;并安裝centos7 2、安裝docker docker安裝手冊 3、安裝nodejs centos下安裝Nodejs 4、redash安裝 1)、clone git repostory …

List接口常用實現類的特點和底層實現

List接口常用的實現類有3個&#xff1a;ArrayList、LinkedList、Vector。 那么它們的特點和底層實現有哪些呢&#xff1f; ArrayList特點和底層實現 ArrayList底層是用數組實現的存儲。 特點&#xff1a;查詢效率高&#xff0c;增刪效率低&#xff0c;線程不安全。我們一般使用…