vue v-cloak 效果演示

最新推荐文章于 2024-11-17 10:39:57 发布

阿豪boy

最新推荐文章于 2024-11-17 10:39:57 发布

阅读量106

点赞数

文章标签： vue python js html javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065633

版权

原文链接: vue v-cloak 效果演示

上一篇: vue cli webpack-chain 使用

下一篇: vue 简单实现 vuex

设置不使用缓存,以及降低网速

注意script引入的vue.js,需要在body中, 位于脚本之前,这样先渲染之前的页面

等到下载后vue之后才会执行js脚本,挂载实例,渲染数据

在渲染数据后,会移除v-cloak属性, 显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>
        h1 {{msg}}
    </h1>
    <h1 v-cloak>
        h2 {{msg}}
    </h1>

</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            msg: "hello"
        }
    })
</script>
</body>

</html>