vueコンポーネント内のdivが表示できません

Vue コンポーネントで <div> タグを使用する場合、関連するスタイルが設定されていないか、コンテンツが追加されていない場合、<div> タグは表示されないことがあります。それをレンダリングしてください。通常、これは Vue コンポーネントがテンプレートに対して特別な処理を実行することによって発生します。

考えられる原因と解決策をステップごとに分析してみましょう:

1. Vue コンポーネントのレンダリング メカニズム

Vue コンポーネントはテンプレートを通じてコン​​ポーネント化されており、開発されると次の 3 つのタイプに分類されます。

1. 親コンポーネントのあるコンポーネント (カード スロットのコンテンツ)
2. 親コンポーネントのないコンポーネント (ルート コンポーネント)
3. 機能コンポーネント (ステートレスであり、データ変更があってはなりません)

Vue のコンポーネント レンダリング メカニズムでは、各 Vue コンポーネントが独立した完全なページである必要があります。つまり、各 Vue コンポーネントは 1 つだけを持つ必要があります。 1 つのルート要素。したがって、一部の不規則な記述方法により、コンポーネントのレンダリングに失敗する可能性があります。

2. よくある質問

2.1 Vue コンポーネントがコンテンツを追加しない

<div> タグのみが Vue に追加される場合コンポーネントの場合、コンテンツは追加されません。コンテンツの場合、レンダリングされていないように見えます。

解決策: コンテンツを追加するか、関連スタイルを設定して表示させます。

2.2 Vue コンポーネントのルート要素は 1 つだけです。

以下に示すように、複数のルート要素を Vue コンポーネントに追加する場合:

<template>
  <div class="container">
    <h1>这是标题</h1>
  </div>
  <div class="box">
    <p>这是内容</p>
  </div>
</template>

現時点では、コンポーネントはレンダリングされず、エラーも報告されないことがわかりました。これは、Vue が各コンポーネントにルート要素を 1 つだけ持つことができると規定しているためです。

解決策: 以下に示すように、ルート要素が 1 つだけある形式に変更します。

<template>
  <div>
    <div class="container">
      <h1>这是标题</h1>
    </div>
    <div class="box">
      <p>这是内容</p>
    </div>
  </div>
</template>

2.3 V-show、v-if およびその他の命令が Vue コンポーネントで使用されている

Vue コンポーネントで v-show、v-if およびその他の命令を使用する場合、Vue のコンポーネント レンダリング メカニズムにより、命令にバインドされた式が ## の場合#false、要素はレンダリングされません。

例:

<template>
  <div v-show="false">这是内容</div>
  <div v-if="false">这是内容</div>
</template>

上記のコードでは、

v-show="false" と v-if="false" の式が原因で、 両方とも false であるため、これら 2 つの <div> タグは表示されません。

解決策: このディレクティブにバインドされている式を

true に変更するか、要素のコンテンツまたはスタイルを追加して表示できるようにします。

2.4 スロットは Vue コンポーネントで使用されます

Vue コンポーネントでスロットを使用すると、

<div> タグが表示されない場合があります。 。

例:

<template>
  <div>
    <slot></slot>
  </div>
</template>

上記のコードでは、

<div> タグにコンテンツやスタイルが追加されていないため、<div> タグはレンダリングされていないように見えます。

解決策: 以下に示すように、コンテンツまたはスタイルを

<div> タグに追加して表示させます:

<template>
  <div>
    <slot></slot>
    <div class="container">这是新添加的内容</div>
  </div>
</template>

3. 概要

Vue コンポーネントで

<div> タグを使用する場合の問題は、通常、Vue コンポーネントのレンダリング メカニズム、複数のルート ノード、命令バインディング式が false であることが原因でレンダリングできません。スロットにコンテンツが追加されていないなどの理由で発生します。この問題は、コンテンツやスタイルを追加することで簡単に解決できます。

以上がvueコンポーネント内のdivが表示できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。