当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

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

2018年02月17日  | 移动技术网IT编程  | 我要评论

王亮在期末考试中,全才杀手,打量的近义词是什么

今天开始学习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显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网