1、v-textjavascript
用于渲染普通文本,不管什么时候,绑定的数据对象上 msg
属性发生了改变,插值处的内容都会更新。html
<span v-text="message"></span> <!-- 简写方式 --> <span>{{message}}</span>
export default { data () { return { message: "这里能够包含html标签" } } }
2、v-htmljava
若是你想输出真正的 HTML,你须要使用 v-html
指令,v-text仅渲染标签,不能解析 HTML 代码。app
<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!spa
v-html展现效果: Hello Vue!code
总结:v-text和{{}}表达式渲染数据,不解析标签。htm
v-html不只能够渲染数据,并且能够解析标签。 对象