上一篇我們講解了兩種方式，把Vue對象的數據展示在頁面上： 1、插值表達式 2、v-text指令 但是如果我們展示的數據包含元素標簽或者樣式，我們想展示標簽或樣式所定義的屬性作用，該怎麼進行渲染，比如展示內容為：<h1>這是一個h1元素內容</h1>。我們先用插值表達式和v-text嘗試一下。 運行 ...
上一篇我們講解了兩種方式，把Vue對象的數據展示在頁面上：
1、插值表達式
2、v-text指令
但是如果我們展示的數據包含元素標簽或者樣式，我們想展示標簽或樣式所定義的屬性作用，該怎麼進行渲染，比如展示內容為：<h1>這是一個h1元素內容</h1>。我們先用插值表達式和v-text嘗試一下。
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
<p v-text="msg"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "<h1>這是一個h1元素內容</h1>"
}
});
</script>
</body>
運行結果，如下：
結論：插值表達式和v-text指令被直接解析為了字元串元素。對此Vue提供了另外一個指令：v-html
<div id="app">
<p v-cloak>{{ msg }}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "<h1>這是一個h1元素內容</h1>"
}
});
</script>
運行結果：
成功的解析了標簽屬性。大家也可以嘗試定義樣式屬性看看，如下：
var vm = new Vue({ el : "#app", data : { msg : "<h1 style='color:red'>這是一個h1元素內容</h1>" } });
每天進步一點點！
