Vue防止表达式闪现 v-cloak

最新推荐文章于 2022-06-29 09:25:02 发布

搬运Gong

最新推荐文章于 2022-06-29 09:25:02 发布

阅读量232

点赞数

分类专栏： Vue 文章标签： vue v-cloak

本文链接：https://blog.csdn.net/qq_20315217/article/details/116003746

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

前端开发时，经常遇到自己在页面写的表达式数据渲染慢，会直接显示表达式的问题，这样给用户的体验不好，如下图：
在这里插入图片描述
这种情况，使用 vue 的内置指令 v-cloak 来处理即可。此指令需要与 css 配合使用，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止指令闪现</title>
  <style>
  	/** 定义属性表达式样式 **/
    [v-cloak] { display: none }
  </style>
</head>
<body>
<div id="example">
  <!-- 在需要控制的 element 中加入 v-cloak -->
  <p v-cloak>{{content}}</p>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  alert(123);
  new Vue({
    el: '#example',
    data: {
      content: 'Hello World!'
    }
  })
</script>
</body>
</html>

搬运Gong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue防止表达式闪现 v-cloak

v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }前端开发时，经常遇到自己在页面写的表达式数据渲染慢，会直接显示表达式的问题，这样给用户的体验不好，如下图：这种情况，使用 vue 的内置指令 v-cloak 来处理即可。此指令需要与 css 配合使用，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫