前面的篇章Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题，那么这里面也介绍了插值表达式的使用。
基本使用方式
插值表达式
{{ msg }}
v-text
<div v-text="msg"></div>
v-html
<div v-html="msg"></div>
区别1：插值表达式存在网络延迟问题，而v-text 、v-html不存在该问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<div id="app">
<!-- 使用插值表达式渲染数据 -->
<p>{{ msg }}</p>
<!-- 使用v-text渲染数据 -->
<div v-text="msg"></div>
<!-- 使用v-html渲染数据 -->
<div v-html="msg"></div>
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello world,Vue!'
}
})
</script>
</body>
</html>
区别2：插值表达式可以增加其他字符串内容，v-text、v-html只能根据data设置的内容渲染元素。
从上面的示例可以看到插值表达式、v-text、v-html都可以渲染数据，那么为什么需要提供三种方式呢？ 主要的原因是插值表达式可以拼接html元素的内容，而v-text和v-html只能将提供的数据渲染到html元素中，覆盖html内已有的内容信息。
示例如下：
浏览器显示：
可以看到只有插值表达式显示html元素内增加的字符串。v-text和v-html都会将html元素内的信息进行覆盖。
所以，如果当需要写一定字符串显示，这时候就应该使用插值表达式了。
区别3：插值表单式和v-text都会转义，v-html则可以渲染html元素
将需要渲染的信息设置为h1标签，下面来看看渲染的效果，如下：
