下载掌阅APP，畅读海量书库
立即打开
v-cloak指令不需要表达式。这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签，直到实例准备完毕。
【例4.9】v-cloak指令（源代码\ch04\4.9.html）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-cloak</title>
<!-- 添加 v-cloak 样式 -->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{message}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message:"山边幽谷水边村，曾被疏花断客魂。"
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
在谷歌浏览器中运行程序，效果如图4-12所示。
图4-12 v-cloak指令