码迷,mamicode.com
首页 > 其他好文 > 详细

解决Vue闪烁问题[vue语法直接在页面上展示]

时间:2020-07-02 13:45:24      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:splay   语法   删除   解决   选择器   must   时间   message   class   

一、基本概念

  1. 插值表达式

??Vue将数据渲染到DOM的表达式,也叫模板语法或“Mustache”语法 (双大括号) ,又叫小胡子语法,实现通过简单的方式给页面插入数据。即:

<span>Message: {{ msg }}</span>

二、现象

Vue的表达式原样显示在浏览器页面上,等待很短的时间后,页面才会展示我们所预想的页面效果。

三、原因

Vue加载太慢,没人处理插值表达式,直接原样显示在页面上,等Vue加载完了,才会处理,这时数据才会展示出来,会有闪烁的效果出现

四、解决方法

4.1原理

在Vue编译完成之前,v-cloak会一直做为元素的属性。当Vue编译加载完后,Vue会将v-cloak属性删除,从而达到当编译加载完之前隐藏、编译加载完后显示的效果,解决闪烁问题

4.2方法

  1. 给元素添加v-cloak指令

  2. 在style标签中添加一个 v-cloak的属性选择器样式 display:none

<style>
  [v-cloak]{
    display: none;
  }
</style>
<div v-cloak>{{name}}</div>

解决Vue闪烁问题[vue语法直接在页面上展示]

标签:splay   语法   删除   解决   选择器   must   时间   message   class   

原文地址:https://www.cnblogs.com/langkyeSir/p/13224061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!