507 Mustache，v-once，v-html，v-text，v-pre，v-cloak
阿新 • • 發佈：2020-08-18
Mustache
如何將data中的文字資料，插入到HTML中呢？
我們已經學習過了，可以通過Mustache語法(也就是雙大括號)。
Mustache: 鬍子/鬍鬚.
我們可以像下面這樣來使用，並且資料是響應式的
v-once
但是，在某些情況下，我們可能不希望介面隨意的跟隨改變
這個時候，我們就可以使用一個Vue的指令
v-once:
該指令後面不需要跟任何表示式(比如之前的v-for後面是由跟表示式的)
該指令表示元素和元件(元件後面才會學習)只渲染一次，不會隨著資料的改變而改變。
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-html
某些情況下，我們從伺服器請求到的資料本身就是一個HTML程式碼
如果我們直接通過{{}}來輸出，會將HTML程式碼也一起輸出。
但是我們可能希望的是按照HTML格式進行解析，並且顯示對應的內容。
如果我們希望解析出HTML展示
可以使用v-html指令
該指令後面往往會跟上一個string型別
會將string的html解析出來並且進行渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', url: '<a href="http://www.baidu.com">百度一下</a>' } }) </script> </body> </html>
v-text
v-text作用和Mustache比較相似：都是用於將資料顯示在介面中
v-text通常情況下，接受一個string型別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}, 李銀河!</h2> <h2 v-text="message">, 李銀河!</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html>
v-pre
v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示原本的Mustache語法。
比如下面的程式碼：
第一個h2元素中的內容會被編譯解析出來對應的內容
第二個h2元素中會直接顯示{{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
</html>
v-cloak
在某些情況下，我們瀏覽器可能會直接顯然出未編譯的Mustache標籤。
cloak: 斗篷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 在vue解析之前, div中有一個屬性v-cloak
// 在vue解析之後, div中沒有一個屬性v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
</body>
</html>