Vue で更新およびロードするときに v-cloak がちらつく場合の対処方法

今回は、Vue でリフレッシュ時とロード時に v-cloak が点滅する場合の対処方法を説明します。Vue でリフレッシュ時やロード時に v-cloak が点滅する場合の注意事項について説明します。ケースを見てみましょう。

変数 が点滅します。たとえば、

<p class="#app">
  <p>{{value.name}}</p>
</p>

{{value.name}}

<p class="#app" v-cloak>
  <p>{{value.name}}</p>
</p>

[v-cloak] {
  display: none;
}

属性が上位レベルの属性によって上書きされるため、レベル

[v-cloak] {
  display: none !important;
}

追加:

Vue での v-cloak の解釈を見てみましょう

v-cloak の役割と使用法

使用法: このディレクティブは、関連付けられたインスタンスが作成されるまで要素に残りますコンパイルを終了します。 [v-cloak] { display: none } などの CSS ルールとともにこのディレクティブを使用すると、インスタンスの準備ができるまで、コンパイルされていない Mustache タグを非表示にすることができます。公式 API

<p id="app">
  {{msg}}
</p>

HTML は Vue インスタンスにバインドされており、ページが読み込まれると

が点滅し、効果をより明確にするために、読み込みを遅らせることができます。 Vue インスタンス

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak を使用すると、CSS に

[v-cloak] {
 display: none;
}

を追加し、HTML の読み込みポイントに v-cloak を追加すると、この問題を解決できます

<p id="app" v-cloak>
  {{msg}}
</p>

Vue1 では、Vue インスタンスはボディにマウントされますが、Vue2 では許可されていません。ページ全体をインスタンス化したい場合は、ページ全体を収容するために追加の p を使用する必要があります。ページのコンテンツを作成してインスタンス化します このように、v-cloak を使用する場合は、次のことも必要になります。 この方法を使用する

実際のプロジェクトでは、@import

@import "style.css"
@import "index.css"

この状況を回避するには、リンクで紹介されているCSSに[v-cloak]を記述するか、インラインCSSスタイルを記述することで問題が解決します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue.js+element-ui

以上がVue で更新およびロードするときに v-cloak がちらつく場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。