首页 > 编程笔记

Vue v-cloak命令的用法

Vue 中的 v-cloak 指令不需要表达式。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则（如 [v-cloak]{display:none}）一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：Vue v-cloak指令的用法。

<!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>

在 Chrome 浏览器中运行程序，效果如图1所示。

图1：v-cloak 指令演示

Vue v-cloak命令的用法

推荐阅读