vue中頁面資訊的展示
阿新 • • 發佈：2018-12-27
v-text
v-text可以將一個變數的值渲染到指定的元素中。
用法：
<span v-text="hello"></span>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
結果：
從上面我們可以看出，h1標籤只能以字串形式輸出，也就是說v-text只能將資料以字串的形式在HTML頁面中進行輸出。
v-html
{{}}和v-text會將資料解釋為純文字，而非HTML，為了輸出真正的HTML，你需要使用v-html
用法：
<div v-html="hello"></div>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
結果：
從上面我們可以看出，被h1包裹的文字明顯被加粗放大了，這說明被v-html能將資料以HTML的形式在頁面中進行輸出。
v-cloak
v-cloak指令保持在元素上直到關聯例項結束編譯後自動移除，v-cloak和CSS規則如[v-cloak]{display: none;}
{{}}表示式閃爍問題。
用法
<style> [v-cloak]{ display: none; } </style> <span v-cloak>{{hello}}</span><br> var vm = new Vue({ el:'#app' ,data:{ hello:'<h1>Hello World !</h1>' } });
結果：
這個的展示效果看上去與v-text的效果一樣，其實是有區別的，那就是當頁面載入緩慢時，被v-cloak包裹的資訊是不會輸出的，除非頁面載入完畢，這樣的好處是，當頁面內容較多或者頁面本身由於網速差而載入緩慢時，頁面中的資訊不會出現由{{hello}}到<h1>Hello World !</h1>的抖動。
完整程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-text="hello"></span><br>
<span v-cloak>{{hello}}</span><br>
<div v-html="hello"></div>
</div>
</body>
<!--1、匯入Vue的js檔案 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
</script>
</html>