v-cloak、v-text和v-html之间的区别

v-cloak、v-text和v-html这三个都能进行数据渲染，他们之间有什么相同点和不同点呢？

代码如下：

	
		
		
	
	
		

			
-----{{ msg }}++++++++
			
+++++++
			
++++++++
			
----------------------------
			
{{ msg2 }}
			

			

		
		
		 
		
	

效果图：

 

根据这张图我们来看下这三个的区别：

v-cloak：

1. 使用方式：（插值表达式）

   {{ msg }}

2. 当网络较慢或拥堵时，会出现插值表达式闪烁的现象（见上图），也就是会出现{{ msg }}这个文本，因为数据暂时没有加载出来，解决办法：使用属性选择器，设置display: none。

3. 可以在插值表达式周围插入其他字符
4. 当放入的数据含有HTML标签时，会将该标签当做文本显示出来

    

 v-text：

1. 使用方法：

    

2. 当网络不佳时，不会出现闪烁情况
3. 当在标签内加入其他文本时，当数据加载完毕后，会将标签内的文本覆盖掉
4. 当放入的数据含有HTML标签时，会将该标签当做文本显示出来

 

v-html： 

1. 使用方法

    

2. 当网络不佳时，不会出现闪烁问题
3. 当在标签内加入其他文本时，当数据加载完毕后，会将标签内的文本覆盖掉
4. 当放入的数据含有HTML标签时，浏览器会解析该标签，如上图的Hello变大了