(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 將內容...