Vue系列教程（二）v-cloak、v-text、v-html的基本使用

v-cloak

我们已经知道双向绑定的方法如下：

    
    


    
{{msg}}

效果：

调整网络速度：
浏览器f12，找到Network，改成Slow 3G，刷新页面

显示效果如下：

当网速比较慢的时候，我们能看到插值表达式，这时候v-cloak该出场了：

    
    
    


    
{{msg}}

这时候刷新页面：

当请求完成的时候，才会显示出值：

所以v-cloak能够解决插值表达式的闪烁问题

v-text

v-text的使用方法：

v-text不需要任何配置，直接不存在插值表达式的闪烁问题。
考虑下面的情况：

    
hello {{msg}}
    
    
hello
       

也就是说，如果不只是想输出字符串，在字符串前后还想拼接一些其他字符的时候，使用v-cloak。
如果只想输出字符串本身，使用v-text。

v-html

v-html会将内容当作html进行渲染，使用方法如下：

页面会将msg的内容当成html渲染：