【笔记】解决vue页面加载完成前显示变量名的问题——v-cloak指令

简介: 解决vue页面加载完成前显示变量名的问题——v-cloak指令

一、问题

vue页面加载完成前/编译完成前显示变量名{{xxx}},可以使用v-cloak 这个指令:

  • 这个指令保持在元素上直到关联实例结束编译。
  • 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

二、用法

v-cloak 的用法:

  • HTML代码:
<div v-cloak>
  {{ message }}
</div>
  • CSS代码:
[v-cloak] {
  display:none !important;
}
  • !important 可以有效避免样式覆盖问题
  • 常用在id="app"的根元素

over

相关文章
|
1天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
1天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
5天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
10 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1037 0
|
9天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
42 11
|
9天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
199 65
|
9天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
199 62
|
8天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
29 10
|
8天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
27 9