插值表達式

花括號

格式：

{{表達式}}

說明：

• 該表達式支持JS語法，可以調用js內置函數（必須有返回值）

• 表達式必須有返回結果。例如 1 + 1，沒有結果的表達式不允許使用，如：var a = 1 + 1;

• 可以直接獲取Vue實例中定義的數據或函數

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({el:"#app",data:{name:"Jack"} })

插值閃爍

使用{{}}方式在網速較慢時會出現問題。在數據未加載完成時，頁面會顯示出原始的{{}}，加載完畢后才顯示正確數據，我們稱為插值閃爍。

我們將網速調慢一些，然后試試看剛才的案例：

刷新頁面：

v-text和v-html

使用v-text和v-html指令來替代{{}}

說明：

• v-text：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會作為普通文本輸出

• v-html：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會被渲染

示例：

HTML:

<div id="app">v-text:<span v-text="hello"></span> <br/>v-html:<span v-html="hello"></span> </div>

JS:

var vm = new Vue({el:"#app",data:{hello: "<h1>大家好，我是峰哥</h1>"} })

效果：

并且不會出現插值閃爍，當沒有數據時，會顯示空白。

總結

以上是生活随笔為你收集整理的插值表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。