Rumah > hujung hadapan web > tutorial js > 如何解决Vue.js显示数据的时,页面闪现

如何解决Vue.js显示数据的时,页面闪现

亚连
Lepaskan: 2018-06-06 11:03:25
asal
2527 orang telah melayarinya

下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助。

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

第一步、加入一段css代码

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

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

<p id="app" v-cloak> 
  <h1>{{message}}</h1> 
  <h1>{{name}}</h1> 
</p>
Salin selepas log masuk

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

第三步、js部分没有变化

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

下面贴上完整代码:

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

{{message}}

{{name}}

Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Webpack中解决热部署检测不到文件变化的问题

在Webpack dev server中出现热加载失败的问题

在webpack-dev-server中实现远程访问配置方法

Atas ialah kandungan terperinci 如何解决Vue.js显示数据的时,页面闪现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan