Vue入门教程--v-cloak,v-text,v-html的基本用法详解（article:2）

Vue.js 初步入门

---

属性介绍

1. v-cloak : 用于将延迟而出现的数据渲染问题进行附加优化
2. v-text : 用于将延迟而出现的数据渲染问题进行属性化优化
3. v-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>

但是同样，弊端是不能进行标签内的语句拼接。

---