携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情
上一章，我们介绍了Vue指令中的绑定指令v-model和v-bind。这一章，我们继续介绍Vue中的显示内容的指令。
1 v-text 文本渲染指令
我们知道在Vue的template节点中，使用插值表达式{{ showText}}，可以渲染data中的定义的变量值。v-text指令，则是渲染数据的另外一种方式，如下：
M层：
data: {
showText: 'Hello 掘金'
}
V层：
<!-- 1.插值表达式 -->
<h1>{{ showText }}</h1>
<!-- 2.v-text指令 -->
<h1 v-text="showText"></h1>
运行代码，发现用两种方式渲染数据的运行结果相同。
2 v-html 富文本渲染指令
v-text指令只能渲染普通的字符串，而不能渲染复杂数据（如富文本）。使用v-html指令可以渲染富文本，如下：
M层：
data() {
return {
showText: '<h1> 你好，掘金</h1>'
}
},
V层：
<h1 v-html="showText"></h1>
渲染效果如下：
那么插值表达式、v-text和v-html都是渲染M层data里的数据，它们的区别在于：
- 插值表达式和v-text指令均不可渲染富文本。
- v-text和v-html在V层不能继续添加文本内容，而插值表达式可以继续添加文本。如下：
<h1> {{showText}} 此处仍可添加本文，正常显示</h1>
<h1 v-text="showText">此处本文不显示</h1>
<h1 v-html="showText">此处本文不显示</h1>
3 v-pre 原样渲染指令
v-pre指令是直接渲染内容，而跳过编译过程，使用方法是直接在标签上，添加v-pre，无需赋值给它，举例：
M层：
data() {
return {
showText: '你好，掘金'
}
},
V层：
<h1> {{ showText }}</h1>
<h1 v-pre>{{ showText }}</h1>
第二行h1使用v-pre以后，我们会发现Vue未对插值表达式{{ showText }}进行解析，而是原样输出。如图所示：
4 v-cloak指令
在快速刷新页面或网速较慢时，vue不能立即渲染，会在页面展示其源代码:
当网速过慢时，浏览器显示的是Vue的源代码，对于用户来说，这是一种不友好的展现形式，所以在实现Vue项目之前，我们可以使用v-cloak指令，在Vue数据渲染完成之前，隐藏源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
注意，需要在css样式中，设置[v-cloak]的display属性为none，这样就避免了网速过慢引起的显示源代码的情况了。
