Vue技术 v-cloak指令（用于在 Vue 实例加载和编译之前隐藏元素）
v-cloak 指令用于防止在 Vue 实例加载和编译之前，就显示未编译的 Mustache 标签。通常，Vue 会在实例挂载之后替换掉 v-cloak 元素。
使用 v-cloak 指令的步骤如下：
- 在你的样式中添加一个自定义属性，比如
[v-cloak] { display: none; }。 - 在你的 HTML 元素中添加
v-cloak指令。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue v-cloak Example</title>
<style>
/* 在样式中定义 v-cloak 时的状态 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>在这个例子中，当 Vue 实例正在编译时，div 元素会保持有 v-cloak 属性，因此它会保持隐藏。直到 Vue 实例完成编译，v-cloak 属性会被自动去除，div 元素随之显示出最终的内容。
评论已关闭