05 Vue指令篇之文字內容指令

2021-09-27 06:01:51 字數 1272 閱讀 8764

主要作用:替換元素內的內容

1.1 v-text 例項演示

lang

="en"

>

>

charset

="utf-8"

>

>

01_vue指令文字內容_v-texttitle

>

head

>

>

class

= v-text

="text"

>

v-text

="text"

>

v-text指令的主要作用在於替換標籤的內容span

>

div>

body

>

src=

"">

script

>

>

newvue(,

});script

>

html

>

結果如下圖:

主要作用:在於替換標籤的內容, 如果替換字串中含有html標籤元素,會被解析

1.1 v-html 例項演示

lang

="en"

>

>

charset

="utf-8"

>

>

02_vue指令文字內容_v-htmltitle

>

head

>

>

class

= v-html

="text"

>

v-text

="text"

>

v-html指令的主要作用在於替換標籤的內容, 如果替換字串中含有html標籤元素,會被解析span

>

div>

body

>

src=

"">

script

>

>

newvue(,

});script

>

html

>

結果如下圖:

v-text指令只替換文字內容,如果是html**段也不會被解析;v-html指令在替換文字內容時,如果目標內容不是純文字,是一段html**段會被瀏覽器解析渲染。

Vue 指令 內容輸出

通過 我們可以很方便的從模板中輸出資料,但是這種方式會有乙個問題,當頁面載入渲染比較慢的時候,頁面中會出現 vue 提供了幾個指令來解決這個問題 指令中的表示式不需要使用 v textv text title p 弊端 v text 會填充整個 innerhtml v cloakv cloak p ...

vue之檔案指令

1.v bind 屬性名 變數 2.簡寫 屬性名 變數 3.class 變數 class class 類1變數,類n變數,這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 指令 v on 事件名 方法變數 簡寫 事件名 方...

vue之常用指令

1 mustache 插槽指令即 比如 支援字串,表示式和方法等。2 v once 該指令使用後表示元素或者元件只渲染一次,不會隨資料改變而改變。比如 3 v html 該指令可以解析html 並渲染,該指令後面往往跟上乙個string型別資料,比如其中url是html標籤片段。4 v text 指...