五、Vue模板语法之v-pre与v-cloak

作者: 温新

分类: 【Vue.js】

阅读: 2640

时间: 2020-12-01 14:26:10

v-pre不解析，直接输出；

v-cloak解决闪屏问题。

v-pre指令

v-pre指令，简单也说，就是写的是什么样，那么它就输出什么样！

如：{{ msg }}若不想Vue云解析{{}}中的msg该怎么办？Vue提供了一个执行v-pre，可以不对其中的msg进行解析，那么它的输出结果是 {{ msg }}

v-cloak指令

v-cloak指令，解决闪屏问题。

<!DOCTYPE html>
<html>
<head>
    <title>模板语法:v-pre与v-cloak</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <style>
        /** 为v-cloak指令设置样式 **/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 输出结果为 {{ webUrl }}-->
    <div v-pre>{{ webUrl }}</div>
    
    <!-- 输出结果为 个人博客-->
    <div v-cloak>{{ webName }}</div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            webName:"个人博客",
            webUrl:"<a href='https://www.ziruchu.com'>自如初</a>",
        }
    });
</script>

</body>
</html>

从上面案例的结果来，使用v-pre时，{{ webUrl }} 被原样输出了。

关于闪屏问题

由于浏览器网速问题，Vue在渲染{{msg}}数据时可能会有延迟，这延迟的一瞬间{{msg}}会原样输出，如：原本输出的是 自如初，延迟的结果就是{{msg}}被原样输出了。可以使用v-text与v-cloak解决。

v-text只会输出文本，不会对HTML进行解析，若要输出HTML内容，那么v-text有着明显的局限性，也不灵活。

v-cloak解决闪屏的问题。使用该指令时，要为该指令加display:none的样式。

2020-12-1

请登录后再评论