解决使用Vue.js显示数据的时,页面闪现原始代码的问题

2018-02-17 19:16:28来源:作者:人点击

分享

今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下。查访各方资料,终的解决方法。

第一步、加入一段css代码

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

第二步、在view上引用css模块

<div id="app" v-cloak>   <h1>{{message}}</h1>   <h1>{{name}}</h1> </div> 

注意,有的文章说,在具体数据部分加入v-cloak,但是这样太麻烦,每一个数据显示都要加,所以直接加载view大模块上,就能解决问题了。

第三步、js部分没有变化

<script type="text/javascript">     var exeData = {     message : "Hello World",     name:"我是Vue"   };    new Vue({     el : "#app",     data : exeData   }) </script> 

下面贴上完整代码:

<!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="app" v-cloak>     <h1>{{message}}</h1>     <h1>{{name}}</h1>   </div> </body> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">   //模型数据Model   var exeData = {     message : "Hello World",     name:"我是Vue"   };    //View实例,也就是View-Model(VM)   new Vue({     el : "#app",     data : exeData   }) </script> </html> 

以上这篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • 详解vue数据渲染出现闪烁问题
  • 解决VUEX刷新的时候出现数据消失

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台