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

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

代码如下:



	
		
		
	
	
		

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

+++++++

++++++++

----------------------------

{{ msg2 }}

效果图:

v-cloak、v-text和v-html之间的区别_第1张图片 

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

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变大了

你可能感兴趣的:(前端,#,vue)