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

内容简介：下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

今天开始学习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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

我看电商3：零售的变革

黄若 / 电子工业出版社 / 2018-4 / 49

在《我看电商3：零售的变革》之前，黄若先生的“我看电商”系列图书《我看电商》《再看电商》《我看电商2》，均为行业畅销书。黄若先生的图书有两大特如一是干货满满，二是观点鲜明。 “新零售”是眼下的热门词。在2017年里，数以万计的企业以“新零售”作为标识进入市场。但是社会上对“新零售“存在着各种模糊的定义和不尽相同的解读。《我看电商3：零售的变革》中明确提出：新零售不应过分关注于渠道形式......一起来看看《我看电商3：零售的变革》这本书的介绍吧!

码农工具

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

我看电商3：零售的变革

HTML 压缩/解压工具

随机密码生成器

正则表达式在线测试