vue 插值操作

2021-10-09 17:19:57 字數 842 閱讀 3562

vue.js 的核心是乙個允許採用簡潔的模板語法來宣告式地將資料渲染進 dom 的系統:

mustache鬍子語法(雙大括號語法),直接用},將data中的值寫入頁面中

data:

}) v-html:

若後台返回的資料為html標籤內容,如,寫成如下**,會直接在頁面顯示

data:

}) 但其實我們想顯示的為乙個超連結,所以要用v-html

就可以顯示為超連結了,v-text:

直接將文字顯示在頁面中,與mustache使用的方式差不多,都可以顯示內容

但不如mustache方便,如果想拼接個資料,還是使用mustache便捷。

v-text中如果有拼接的值,裡面的值會覆蓋後面拼接的值,在此指「世界」

`
v-once

該元素和元件只渲染一次,不會隨資料改變而改變,想不支援響應式,就可以使用。

只使用一次,後續不會修改的值,可以使用這個指令。

``
v-pre :

若想要將乙個值原封不動的顯示,不想要解析,可以在元素中加入此指令

`
頁面就會顯示}

v-cloak:

在一些情況下,瀏覽器可能會直接顯示出mustache標籤,閃一下才會出現解析後的值。

作用是:在vue解析前,在div中有v-cloak屬性,在解析vue後,這個屬性自動刪除。所以在解析前不會顯示mustache

data:

})

vue 插值操作

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

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的值改變時,存...