v-cloak,v-text,v-html的基本用法

属性介绍

1. v-cloak : 用于将延迟而出现的数据渲染问题进行附加优化（延迟加载闪烁问题）
2. v-text : 用于将延迟而出现的数据渲染问题进行属性化优化（简单字符串的展示）
3. v-html : 用于将数据域的HTML语句无法解析问题进行处理（识别html标签渲染）

使用详情

1.v-cloak
下面这行代码块中的msg数据可能会因为网络或者设备问题出现延迟加载，相应缓慢的问题，如图所示：

<p>{{msg}}</p>

出现用户体验差，影响布局美观等问题，有两种解决方案，第一种就是添加用v-cloak属性，来延缓控件渲染的时间，等到数据加载完毕，便可成功渲染。

<p v-cloak>{{msg}}</p>

其次，必须要在本页的css样式里加入如下所示代码：

	<style type="text/css">
		[v-cloak]{
			display: none;
		}
	</style>

这些代码用来禁止用v-cloak修饰的控件在没有数据加载完毕时进行渲染。

第二种解决方案是添加v-text

2.v-text
这个属性的功能和v-cloak属性一致，不过是将数据写入属性中，而不是用{{ }}来进行加载。

<p v-text="msg"></p>

这样做便省去了在样式区进行样式渲染的麻烦，但弊端就是不能进行数据文本的拼接操作，两种属性在具体生产环节可以按需进行使用。

3. v-html
vue中放在data数据域中的string数据会被默认全为文本，不会进行解析，从而导致html语言失效的问题：

msg2:"<h5>hello vue.js</h5>"

于是我们可以在标签中加入v-html属性，便可以让v-html中富含的语句进行解析：

<p v-html="msg2"></p>

但是同样，弊端是不能进行标签内的语句拼接，会把标签里面的内容全部替换掉。

如有对小伙伴有用的话，给个赞呗！你们的支持是我继续分享的动力，皇菇凉在此感谢！