1. Home
  2. HTML
  3. 解决Vue显示数据时，页面闪现原码

解决Vue显示数据时，页面闪现原码

在我们使用VUE做模板引擎显示数据时，
有时会因为异步请求慢的原因，
页面加载数据时，原始代码会闪现一下，
百度了一下，找到以下解决办法。

首先我们在css中加入v-cloak

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

接着在view上引用css模块

<div id="vue-ajax" v-cloak>
    <h1>{{ceshi}}</h1>
</div>

这样就可以解决页面原代码闪现的问题了。

全部代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Demo</title>
<style  type="text/css">
    [v-cloak] {
        display: none;
    }
</style>
</head>
<body>
    <!--这是View  -->
    <div id="vue-ajax" v-cloak>
        <h1>{{ceshi}}</h1>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script type="text/javascript">
    // vuezhijie直接绑定数据
    var vm = new Vue({
        el:'.vue-ajax',
        data:{
            ceshi: '冯奎博客'
        }
    })
</script>
</html>

本文为冯奎原创文章，转载无需和我联系，但请注明来自冯奎博客fengkui.net

冯奎博客
请先登录后发表评论
  • latest comments
  • 总共0条评论