【05】vue.js — v-cloak的使用

最新推荐文章于 2023-08-21 08:11:02 发布

有心博客

最新推荐文章于 2023-08-21 08:11:02 发布

阅读量1.1k

点赞数

文章标签： vue v-cloak v-cloak使用

本文链接：https://blog.csdn.net/qq_32629809/article/details/77866652

版权

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
            /***** 结合CSS样式一起使用 *****/
            [v-cloak] {
                display: none !important;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!-- 为span标签添加v-cloak属性 -->
            <span v-cloak>{{{msg}}}</span>
            <span v-html="msg"></span>
        </div>
        <script>
            new Vue({
                el: '#box',
                data: {
                    msg: '<strong>welcome</strong>'
                }
            });
        </script>
    </body>
</html>

未使用v-cloak属性
使用了v-cloak属性

有心博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【05】vue.js — v-cloak的使用

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫