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

一、基本概念

  1. 插值表达式

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

Message: {{ msg }}

二、现象

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

三、原因

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

四、解决方法

4.1原理

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

4.2方法

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

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


{{name}}

你可能感兴趣的:(解决Vue闪烁问题[vue语法直接在页面上展示])