4. Vue - 插值表达式、v-text、v-html的基本使用

前面的篇章Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题，那么这里面也介绍了插值表达式的使用。

基本使用方式

插值表达式

{{ msg }}

v-text

v-html

区别1：插值表达式存在网络延迟问题，而v-text 、v-html不存在该问题。

    
    


    
    

        
        
{{ msg }}

        
        


        
        


    

    
    

    

区别2：插值表达式可以增加其他字符串内容，v-text、v-html只能根据data设置的内容渲染元素。

从上面的示例可以看到插值表达式、v-text、v-html都可以渲染数据，那么为什么需要提供三种方式呢？
主要的原因是插值表达式可以拼接html元素的内容，而v-text和v-html只能将提供的数据渲染到html元素中，覆盖html内已有的内容信息。

示例如下：

浏览器显示：

可以看到只有插值表达式显示html元素内增加的字符串。v-text和v-html都会将html元素内的信息进行覆盖。

所以，如果当需要写一定字符串显示，这时候就应该使用插值表达式了。

区别3：插值表单式和v-text都会转义，v-html则可以渲染html元素

将需要渲染的信息设置为h1标签，下面来看看渲染的效果，如下：