vue指令 v-html 和 v-text 的用法和区别

vue指令 v-html 和 v-text 的用法和区别

作用：

都是用于渲染页面

区别：

v-html可以识别html标签并渲染到页面中，而v-text不能识别标签，只可以渲染文本。

用法：

<div id="app">
        <p v-html="html">我是一个p</p>
        <p v-text="text">我也是一个p</p> 
    </div>

new Vue({
            el:'#app',
            data:{
                html:'<h1>我是v-html<h1>',
                text:'<h1>我是v-text<h1>'   
            }
        })

下面是页面渲染结果：

总结：

通过页面我们可以发现 p 标签中原有文本均被覆盖掉，不同的是使用v-html 指令 的 p 标签 有了标题效果，也就是说浏览器识别了我们的data 中 html对象中的h1标签，而使用了v-text指令的p标签却不能，只是把我们的数据当做字符串来解析。