vue用v-cloak指令解决打开页面显示{{}}问题

最新推荐文章于 2023-02-27 10:30:38 发布

轻锋

最新推荐文章于 2023-02-27 10:30:38 发布

阅读量274

点赞数

分类专栏： Javascript 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/moshowgame/article/details/121483553

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码 , 具体是显示一些{{}}。就可以使用 v-cloak 指令+ v-cloak样式来解决这一问题（缺一不可）。

例如以下html,打开则会显示{{text}} ，一闪而过

<div id="app">
  {{text}}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      text:'https://zhengkai.blog.csdn.net/'
    }
  });
</script>

解决方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue用v-cloak指令解决打开页面显示{{}}问题</title>
    <meta name="author" content="zhengkai.blog.csdn.net">
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <!-- add v-cloak for avoiding the {{code}} displayed when init-->
    <div id="app" v-cloak>
        {{text}}
    </div>
</body>

<script>
    var app = new Vue({
      el: '#app',
      data: {
          text:'https://zhengkai.blog.csdn.net/'
      }
    });
</script>
</html>

轻锋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue用v-cloak指令解决打开页面显示{{}}问题

背景当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码 , 具体是显示一些{{}}。就可以使用 v-cloak 指令+ v-cloak样式来解决这一问题（缺一不可）。例如以下html,打开则会显示{{text}} ，一闪而过<div id="app"> {{text}}</div><script> var app = new Vue({ el: '#app', data: {...
复制链接

扫一扫