一、v-text
用於渲染普通文本,無論何時,綁定的數據對象上 msg
屬性發生了改變,插值處的內容都會更新。
<span v-text="message"></span> <!-- 簡寫方式 --> <span>{{message}}</span>
export default { data () { return { message: "這里可以包含html標簽" } } }
二、v-html
如果你想輸出真正的 HTML,你需要使用 v-html
指令,v-text僅渲染標簽,不能解析 HTML 代碼。
<p v-text=“message”></p>
<p v-html="message"></p> <script type="text/javascript"> var app = new Vue({ el: '#app', //element data: { message: '<strong>Hello</strong> Vue!', } }) </script>
v-text展示效果: <strong>Hello</strong> Vue!
v-html展示效果: Hello Vue!
總結:v-text和{{}}表達式渲染數據,不解析標簽。
v-html不僅可以渲染數據,而且可以解析標簽。