Vue-基本指令(v-once, v-pre, v-html, v-cloak, v-for, v-text)的使用


1.v-once:

  某些情況下我們不希望界面的內容隨意地跟隨改變,這時我們可以使用v-once來達到此目的。

  (1)該指令后面不需要跟任何的表達式;

  (2)該指令表示元素和組件只渲染一次不會隨着數據的改變而發生變化。

  e.g.

  

 

   打開瀏覽器的控制台,在控制台中輸入:app.message = 'hahaha';

  第一個發生變化,第二個無變化。

 

 

2.v-html:

  在某些情況下我們從服務器請求到的數據就是一個HTML代碼,如果我們直接使用{{}}來輸出,會將HTML代碼直接輸出。但是我們希望的是按照HTML的格式進行解析,並將內容顯示出來。

  可以使用v-html指令,該指令后面往往帶上一個string類型,它會將string類型的HTML解析出來並且進行渲染。

  e.g.

 

 結果:

 

3.v-text:

  v-text的作用與Mustache( {{}} )比較類似,都是用於將數據顯示在頁面中,在通常情況下v-text接收一個string類型。但是如果同時存在v-text和Mustache,v-text的內容會覆蓋Mustache的內容。

  e.g.

 

 結果:

 

4.v-pre:

  這個指令用於跳過這個元素和它子元素的編譯過程,用於顯示原本的Mustache語法。

  e.g.

 

 第一個h2元素中的內容會被編譯解析出來對應的內容,第二個h2元素會直接顯示{{message}}。

結果:

 

 

5.v-cloak:

  在某些情況下瀏覽器可能會直接顯示出來未編譯的Mustache標簽,v-cloak可用於防閃爍。

  e.g.

 

 由於延遲函數的存在,在一秒到達之前,vue實例還未初始化,因此此時網頁上顯示的是{{message}},當到達一秒之后,{{mesage}}會馬上變成'你好啊',此變化的瞬間產生了閃爍。

為防止閃爍,在變量未編譯的時候,不予顯示,而當編譯好了之后,才顯示出來。

 

在vue解析之前,div中有一個屬性v-cloak,配合css的display可以使元素不顯示;

在vue解析之后,div沒有一個屬性v-cloak。

 

6.v-for:

  遍歷數組。

  e.g.

 

 結果:

博客日常記錄我的學習內容,如果有錯誤歡迎指出。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM