Vue指令：v-cloak、v-once、v-pre 指令

news2025/1/11 21:54:10

1、v-cloak 指令

v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到 Mustache 标签，然后看到编译后的数据。

（1）设置CSS样式 display:none

<style type="text/css">
    [v-cloak] {
        display: none !important;
    }
</style>

（2）使用 v-cloak 指令，指令格式：

<p v-cloak>{{message}}</p>

【实例】使用 v-cloak 指令，解决Vue使用双大括号标签绑定数据时，因页面加载延时而产生的闪烁问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>v-cloak 指令</title>

    <!-- 设置样式 -->
    <style type="text/css">
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-cloak>{{blogName}}</p>
        <p v-cloak>{{blogUrl}}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    //使用延时2秒方式，模拟页面的加载延时
    setTimeout(() => {
        //创建一个Vue应用程序实例
        const vueApp = Vue.createApp({
            //数据
            data() {
                return {
                    blogName: "您好，欢迎访问 pan_junbiao的博客",
                    blogUrl: "https://blog.csdn.net/pan_junbiao"
                }
            }
        }).mount('#app');
    }, 2000);
</script>

</html>

执行结果：

2、v-once 指令

使用 Vue 指令绑定数据时，如果只需要渲染一次数据，则可以使用 v-once 指令单次插值。单次插值即只执行一次插值，在第一次插入文本后，当数据对象中的属性值发生改变时，插入的文本将不会更新。

指令格式：

<p v-once>{{message}}</p>

3、v-pre 指令

如果想要像是 {{ }} 标签，而不是进行替换，可以使用 v-pre 指令，通过该指令可以跳过该元素和其子元素的编译过程。

指令格式：

<p v-pre>{{message}}</p>

【实例】使用 v-pre 指令。

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p v-pre>{{blogName}}</p>
        <p v-pre>{{blogUrl}}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "使用 v-pre 指令",
                blogName: "您好，欢迎访问 pan_junbiao的博客",
                blogUrl: "https://blog.csdn.net/pan_junbiao"
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：