blocks|key|498480|text|您可以使用V斗篷指令，如果将Vue实例与正确的CSS组合起来，它将隐藏Vue实例，直到编译完成为止。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|498481|HTML：|498482|<div+v-cloak>{{+message+}}</div>|code-block|syntax|javascript|498483|CSS：|498484|[v-cloak]+{+display:+none;+}|498485|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/api/#v-cloak^0|5|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>You can use the <a href="https://v2.vuejs.org/v2/api/#v-cloak" rel="nofollow noreferrer">v-cloak</a> directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.</p>
<p>HTML:</p>
<pre><code>&lt;div v-cloak&gt;{{ message }}&lt;/div&gt;
</code></pre>
<p>CSS:</p>
<pre><code>[v-cloak] { display: none; }
</code></pre>


blocks|key|181030|text|我附上了以下代码。您可以看到与不使用v-cloak的区别。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|181031|<div+id="js-app">
[regular]Hold+it...+<span>{{test}}</span><br/>
[cloak]Hold+it...+<span+v-cloak>{{test}}</span>
</div>|code-block|syntax|javascript|181032|http://codepen.io/gurghet/pen/PNLQwy|181033|entityMap|0|LINK|mutability|MUTABLE|url^0|I|7|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>I attached the following codepen. You can see the difference with and without <code>v-cloak</code>.</p>

<pre><code>&lt;div id="js-app"&gt;
[regular]Hold it... &lt;span&gt;{{test}}&lt;/span&gt;&lt;br/&gt;
[cloak]Hold it... &lt;span v-cloak&gt;{{test}}&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<hr>

<p><a href="http://codepen.io/gurghet/pen/PNLQwy" rel="noreferrer">http://codepen.io/gurghet/pen/PNLQwy</a></p>


blocks|key|181111|text|正如其他人所建议的那样，使用V斗篷是正确的解决方案。然而，正如@+DelightedD0D所提到的，它是笨重的。简单的解决方案是在伪选择器::before的v-cloak指令中添加一些CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|181112|在你的sass/更少的文件中|181113|[v-cloak]+>+*+{+display:none;+}
[v-cloak]::before+{
++content:+"+";
++display:+block;
++position:+absolute;
++width:+80px;
++height:+80px;
++background-image:+url(/images/svg/loader.svg);
++background-size:+cover;
++left:+50%25;
++top:+50%25;
}|code-block|syntax|javascript|181114|当然，您需要为加载程序映像提供有效和可访问的路径。它会呈现出类似的东西。|181115|​|181116|📷|atomic|181117|181118|希望能帮上忙。|181119|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/api/#v-cloak|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/ee053c8c51ec0083f0e23cb35630e5f9.gif|imageAlt^0|1X|8|26|7|E|3|0|0|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1K|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|T|3|P|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1R|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|15|10|16|E|$17|18|19|-4]]]]

<p>As suggested by others using <a href="https://v2.vuejs.org/v2/api/#v-cloak" rel="nofollow noreferrer">v-cloak</a> is proper solution. However as @ DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector <code>::before</code> of <code>v-cloak</code> directive.</p>
<p>In your sass/less file something along the lines of</p>
<pre><code>[v-cloak] &gt; * { display:none; }
[v-cloak]::before {
  content: &quot; &quot;;
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url(/images/svg/loader.svg);
  background-size: cover;
  left: 50%;
  top: 50%;
}
</code></pre>
<p>Of course you'd need to provide a valid and accessible path to loader image. It will render something like.</p>
<p><a href="https://i.stack.imgur.com/naXEV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/naXEV.gif" alt="enter image description here" /></a></p>
<p>Hope it helps.</p>


blocks|key|498573|text|使用v-cloak指令，您可以隐藏未编译的胡子绑定，直到vue实例完成编译。必须使用CSS块来隐藏它，直到编译为止。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|498574|HTML:|BOLD|498575|<div+v-cloak>
++{{+vueVariable+}}
</div>|code-block|syntax|javascript|498576|CSS:|498577|[v-cloak]+{
++display:+none;
}|498578|在编译完成之前，此<div>是不可见的。|498579|您可以看到这个链接v-cloak，以更好地低估。|498580|entityMap|0|LINK|mutability|MUTABLE|url|http://vuetips.com/v-cloak-directive-hides-html-on-startup^0|2|7|0|0|5|0|0|0|4|0|0|9|5|0|9|7|9|7|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1A|8|@$9|1B|A|1C|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1D|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|V|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>Using <code>v-cloak</code> directive you can hide un-compiled mustache bindings until vue instance is done compiling. You must use the CSS block to hide it until compiled.</p>

<p><strong>HTML:</strong>  </p>

<pre><code>&lt;div v-cloak&gt;
  {{ vueVariable }}
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>[v-cloak] {
  display: none;
}
</code></pre>

<p>This <code>&lt;div&gt;</code> will not be visible until the compilation is completed.</p>

<p>You can see this link <a href="http://vuetips.com/v-cloak-directive-hides-html-on-startup" rel="noreferrer">Hide elements during loading using <code>v-cloak</code></a> for better understating.</p>


blocks|key|937936|text|不要在HTML文件中包含任何vuejs语法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937937|<!DOCTYPE+html>
<html>
++<head>
++++<meta+charset="utf-8">
++++<meta+name="viewport"+content="width=device-width,initial-scale=1.0">
++++<title>My+Super+app</title>
++</head>
++<body>
++++<div+id="app"></div>
++++<script+src="/app.js"></script>
++</body>
</html>|code-block|syntax|javascript|937938|在主JavaScript中，您可以：|937939|import+Vue+from+'vue'
import+App+from+'./App'

new+Vue({
++el:+'#app',
++components:+{+App+},
++template:+'<App/>'
})|937940|有关参考，请参阅验证webpack模板。|offset|length|937941|另一种解决办法是使用：|937942|<!DOCTYPE+html>
<html>
++<head>
++++<meta+charset="utf-8">
++++<meta+name="viewport"+content="width=device-width,initial-scale=1.0">
++++<title>My+Super+app</title>
++</head>
++<body>
++++<div+id="app"+is="App"></div>
++++<script+src="/app.js"></script>
++</body>
</html>|937943|通过以下方式：|937944|import+Vue+from+'vue'
import+App+from+'./App'
Vue.component("App",+App);

const+app+=+new+Vue({});

window.addEventListener("load",+async+()+=>+{++++
++app.$mount("#app")
})|937945|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vuetifyjs/webpack/tree/master/template^0|0|0|0|0|8|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Don't include any vuejs syntax in the HTML file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
    &lt;title&gt;My Super app&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script src="/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In your main JavaScript, you can:</p>

<pre><code>import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '&lt;App/&gt;'
})
</code></pre>

<p>See the <a href="https://github.com/vuetifyjs/webpack/tree/master/template" rel="noreferrer">vuetify webpack template</a> for reference.</p>

<p>Another solution is to use:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
    &lt;title&gt;My Super app&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app" is="App"&gt;&lt;/div&gt;
    &lt;script src="/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>With:</p>

<pre><code>import Vue from 'vue'
import App from './App'
Vue.component("App", App);

const app = new Vue({});

window.addEventListener("load", async () =&gt; {    
  app.$mount("#app")
})
</code></pre>


blocks|key|938019|text|把所有东西放进<template>里对我来说很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|938020|内容被隐藏，直到Vue呈现出来。|938021|
<div+id="app">
++<template>
++++<span+class="name">{{+name.first+}}+{{+name.last+}}</span>
++</template>
</div>|code-block|syntax|javascript|938022|/*+index.js+*/
new+Vue({
++el:+'#app',
++data:+{
++++name:+{+first:+'David',+last:+'Davidovich'}
++}
});|938023|entityMap^0|7|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Putting everything inside a <code>&lt;template&gt;</code> worked well for me.</p>
<p>The content is hidden until rendered by Vue.</p>
<pre class="lang-html prettyprint-override"><code>&lt;!-- index.html --&gt;
&lt;div id=&quot;app&quot;&gt;
  &lt;template&gt;
    &lt;span class=&quot;name&quot;&gt;{{ name.first }} {{ name.last }}&lt;/span&gt;
  &lt;/template&gt;
&lt;/div&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>/* index.js */
new Vue({
  el: '#app',
  data: {
    name: { first: 'David', last: 'Davidovich'}
  }
});
</code></pre>


blocks|key|496666|text|**html**
<div+v-cloak>{{+message+}}</div>

**css**
[v-cloak]+{+display:+none;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|496667|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>**html**
&lt;div v-cloak&gt;{{ message }}&lt;/div&gt;

**css**
[v-cloak] { display: none; }
</code></pre>


blocks|key|937843|text|使用<v-cloak>在将数据绑定到相关位置之前隐藏Vue代码。它实际上位于Vue文档中的一个位置，除非您搜索它或彻底阅读，否则任何人都可能会错过它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|937844|entityMap^0|2|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use <code>&lt;v-cloak&gt;</code> to hide your Vue code before binding data to relevant places. It's actually located in a place on Vue documentation that anyone might miss it unless you search for it or read thoroughly. </p>


blocks|key|937731|text|您可以将任何呈现移动到简单的包装器组件中。VueJS初始化(例如，新Vue(.)不应该包含除单个包装器组件之外的任何HTML。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|937732|根据设置的不同，您甚至可以使用<app>Loading...</app>，其中应用程序是包装器组件，其中包含任何加载的HTML或文本，然后在加载时替换。|CODE|937733|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/guide/components.html^0|X|7|H|2|0|0|F|L|13|4|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@$9|T|A|U|1|V]]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|H]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|I|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|J|$K|$5|L|M|N|E|$O|P]]]]

<p>You could move any rendering to a simple <em>wrapper</em> <a href="https://v2.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer">component</a>. The VueJS initialisation e.g. <strong>new Vue(....)</strong> shouldn’t contain any HTML apart from that single wrapper component.</p>
<p>Depending on setup you could even have <code>&lt;app&gt;Loading...&lt;/app&gt;</code> where <strong>app</strong> is the wrapper component with any loading HTML or text in between which is then replaced on load.</p>


blocks|key|498548|text|是的，您可以使用v-cloak，我喜欢使用spinkit，是一个很好的库，只有CSS，检查一个简单的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|498549|​|498550|var+vm+=+null;
++++setTimeout(function()+{
++++	vm+=+new+Vue({
+++++++++el:+'#app',
++++++++data:+{
++++++++++msg:+'Is+great,+using:+',
++++++++++url:+'http://tobiasahlin.com/spinkit/'
+++++++++}
++++++});
+++++},+3000);|code-block|syntax|javascript|498551|#app+.sk-rotating-plane,
[v-cloak]+>+*+{+display:none+}
body{
	background:+#42b983;
	color:+#35495e;
}
#app[v-cloak]+.sk-rotating-plane+{
	display:block;
	background-color:+#35495e;
}|498552|<script+src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>

<link+rel="stylesheet"+type="text/css"+href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">


<div+id="app"+v-cloak>
++++<div+class="sk-rotating-plane"></div>
++++<h1>Vue+with+c-cloak</h1>
++<p>
++++{{+msg+}}
++++<a+:href='url'>{{+url+}}</a>
++<p>
</div>|498553|498554|链接：-+http://tobiasahlin.com/spinkit/|498555|entityMap|0|LINK|mutability|MUTABLE|url|http://tobiasahlin.com/spinkit/^0|8|7|L|7|0|0|0|0|0|0|5|V|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|17|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|18|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|K|7|19|8|@]|E|@]|F|$L|M]]|$1|P|3|Q|5|K|7|1A|8|@]|E|@]|F|$L|M]]|$1|R|3|H|5|6|7|1B|8|@]|E|@]|F|$]]|$1|S|3|T|5|6|7|1C|8|@]|E|@$9|1D|A|1E|1|1F]]|F|$]]|$1|U|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|V|$W|$5|X|Y|Z|F|$10|11]]]]

<p>Yep, you can use <code>v-cloak</code>, I like use <strong>spinkit</strong>, is a great library with only CSS, check a simple example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = null;
    setTimeout(function() {
    	vm = new Vue({
         el: '#app',
        data: {
          msg: 'Is great, using: ',
          url: 'http://tobiasahlin.com/spinkit/'
         }
      });
     }, 3000);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#app .sk-rotating-plane,
[v-cloak] &gt; * { display:none }
body{
	background: #42b983;
	color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
	display:block;
	background-color: #35495e;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css"&gt;


&lt;div id="app" v-cloak&gt;
    &lt;div class="sk-rotating-plane"&gt;&lt;/div&gt;
    &lt;h1&gt;Vue with c-cloak&lt;/h1&gt;
  &lt;p&gt;
    {{ msg }}
    &lt;a :href='url'&gt;{{ url }}&lt;/a&gt;
  &lt;p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Link:
 - <a href="http://tobiasahlin.com/spinkit/" rel="nofollow noreferrer">http://tobiasahlin.com/spinkit/</a></p>


blocks|key|181300|text|对于那些在多个Laravel文件视图中使用v斗篷且无法工作的人，尝试在父刀片文件上使用v斗篷，而不是在任何子刀片文件中使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181301|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>For those who use v-cloak in a view with multiple  Laravel Blade files and it's not working, try to use the v-cloak on the parent blade file rather than in any child blade file.</p>


blocks|key|181341|text|我更喜欢使用v-if来检查我的数据是否准备好了，比如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|181342|<template>
++++<div+v-if="shouldDisplay">
++++++++{{+variableName+}}
++++</div>
++++<div+v-else>
++++++Here+you+can+insert+a+loader
++++</div>
</template>
<script>
export+default+{
++++name:+'Test',
++++data()+{
++++++++return+{
++++++++++++variableName:+null,
++++++++};
++++},
++++computed()+{
++++++++shouldDisplay()+{
++++++++++++return+this.variableName+!==+null;
++++++++}
++++},
++++mounted()+{
++++++++this.variableName+=+'yes';
++++},
};
</script>|code-block|syntax|javascript|181343|这样，只有当数据还没有准备好(使用v-else)时，才能更容易地显示加载程序。|181344|在这种特殊情况下，v-if="variableName"也可以工作，但可能有更复杂的场景。|181345|entityMap^0|6|4|0|0|H|6|0|9|J|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>I prefer using <code>v-if</code> with a computed property that checks if my data is ready, like this: </p>

<pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div v-if="shouldDisplay"&gt;
        {{ variableName }}
    &lt;/div&gt;
    &lt;div v-else&gt;
      Here you can insert a loader
    &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
    name: 'Test',
    data() {
        return {
            variableName: null,
        };
    },
    computed() {
        shouldDisplay() {
            return this.variableName !== null;
        }
    },
    mounted() {
        this.variableName = 'yes';
    },
};
&lt;/script&gt;
</code></pre>

<p>In this way it's easier to show a loader only if the data is not ready (using <code>v-else</code>).</p>

<p>In this particular case <code>v-if="variableName"</code> would work as well, but there can be more complicated scenarios. </p>


<p>maybe this is a trivial question.</p>

<p>so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.</p>

<p><a href="https://i.stack.imgur.com/0wTIv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0wTIv.png" alt="Vue js syntax appear in browser"></a></p>

<p>I know we can trick this out with showing <strong>loading image</strong> before entire page has loaded, but it's there any best solution to fix this?</p>


How do I hide the VueJS syntax while the page is loading?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

也许这是个微不足道的问题。因此，当我在浏览器上运行vuejs应用程序时，允许限制下载速度(设置为低连接)。我在浏览器中得到了未完成的vue语法输出。​​我知道我们可以在整个页面加载之前显示加载图像，但是有什么最好的解决方案来解决这个问题吗？

问如何在页面加载时隐藏VueJS语法？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面加载时隐藏VueJS语法？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面加载时隐藏VueJS语法？
EN