Vue學習總結(五) 插值操作

2021-10-11 22:42:17 字數 1482 閱讀 5853

(1)可以直接插入到標籤中

(2)可以寫簡單的表示式

(3)可以兩個mustache一起使

data: 

})

(1)使用場景:

當我們不希望介面隨意的跟隨改變時,可以用該指令

(2) 用法:

該指令後面不需要跟任何表示式。

該指令表示元素和元件只渲染一次,不會隨著資料的改變而改變。

data: 

})

嘗試開啟console修改message的值,使用v-once後沒用重新渲染,值不會被改變。 

(1)使用場景:

某些情況下,我們從伺服器請求到的資料本身就是乙個html**。

如果我們直接通過}來輸出,會將html**也一起輸出。

但是我們可能希望的是按照html格式進行解析,並且顯示對應的內容。

(2)用法:

該指令後面往往會跟上乙個string型別。

會將string的html解析出來並進行渲染。

data: 

})

執行結果如下:

(1)使用場景:

和mustache比較相似,都是用於將資料顯示在頁面上。

(2)用法:

v-text通常情況下,接受乙個string型別。

data: 

})

執行結果如下:可以看出來v-text會覆蓋後面的內容。

(1)使用場景:

v-pre用於跳過這個元素和它子元素的編譯過程,用於顯示原本的mustache語法。

data: 

})

執行結果如下:

(1)使用場景

這個指令保持在元素上直到關聯例項結束編譯。

即:在vue解析之前,div中有乙個屬性v-cloak

在vue解析之後,div中沒有乙個屬性v-cloak

(2)用法

和 css 規則如[v-cloak]一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢

執行結果為: 在前3秒是空白,後面展示你好啊。

如果不使用v-cloak和對應的css規則,顯示效果為:在前3秒為},後面顯示你好啊。

vue學習筆記 插值操作

指令概述 mustache指令 即大括號語法,其中不僅可以直接寫變數還可以寫簡單的表示式 指令 作用v once 保留第一次的設定 v html 對內容以html 的方式解析 v text 展示文字 v pre 將內容原封不動的展示出來 v cloak 解決螢幕閃動或顯示vue源 問題 v once...

Vue學習03 插值操作

mustache也叫鬍子語法,簡單來說就是兩個大括號 中間放置我們要顯示的變數,只允許在標籤內容中使用,不允許在屬性中使用 示例 h2 p p div newvue script 執行結果 2.v once 看單詞一次就是說,當有這個屬性的時候,展示的內容不變,如上面的示例 當name的值改變時,存...

vue 插值操作

mustache語法 雙大括號語法 用於將data中的文字資料插入到html中,可以寫變數,也可以寫簡單的表示式,並且是響應式的。data 2.v once v once後不跟任何表示式,當不想讓資料是響應式的時候使用,表示元素只渲染一次,不會隨著資料的改變而改變 data 3.v html 將內容...