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标签却不能,只是把我们的数据当做字符串来解析。

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页