Vue の高度なテクノロジー: v-if、v-show、v-else、v-else-if の実装原理を深く理解する

Vue の高度なテクノロジ: v-if、v-show、v-else、v-else-if の実装原則を深く理解し、特定のコード例が必要です

Vue では、v-if、v-show、v-else、v-else-if が一般的に使用される条件付きレンダリング命令であり、条件に基づいて要素の表示と非表示を制御できます。これらの指示は開発では一般的ですが、その実装原則はあまり明確ではありません。この記事では、v-if、v-show、v-else、および v-else-if の実装原則を詳しく分析し、具体的なコード例を示します。

1. v-if
v-if の実装原理は、条件に基づいて要素またはコンポーネントをレンダリングするかどうかを決定する条件付きレンダリング命令です。条件が true の場合、対応する要素またはコンポーネントがレンダリングされます。条件が false の場合、対応する要素またはコンポーネントはレンダリングされません。 v-if の実装原理は次のとおりです。

1. Vue はまず v-if の式を評価して、条件が true かどうかを判断します。
2. 条件が true の場合、Vue は対応する要素またはコンポーネントを作成して挿入します。
3. 条件が false の場合、Vue は対応する要素またはコンポーネントを破棄し、DOM から削除します。

コード例:

<template>
  <div>
    <h1 v-if="show">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

上記のコード例では、show が true の場合、「

Hello World!

」をレンダリングします。 show が When の場合false の場合、要素はレンダリングされません。

2. v-show
v-show の実装原理も条件付き描画命令であり、v-if と同様の機能を持ち、条件に応じて要素の表示・非表示を制御できます。違いは、v-show は要素を破棄せず、要素の表示属性を変更することで要素の表示と非表示を制御することです。

v-show の実装原理は次のとおりです。

1. Vue はまず v-show の式を評価して、条件が true かどうかを判断します。
2. 条件が true の場合、Vue は要素の表示属性を元の値に設定します。
3. 条件が false の場合、Vue は要素の表示属性を none に設定します。

コード例:

<template>
  <div>
    <h1 v-show="show">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

上記のコード例では、show が true の場合は "display: block" を設定することで要素が表示され、show が false の場合は "" を設定することで要素が表示されます。 「display: none」を選択すると、要素が非表示になります。

3. v-else および v-else-if の実装原則
v-else および v-else-if は v-if の補足命令であり、v-if の後に使用できます。複数の条件を処理するため。

v-else および v-else-if の実装原則は次のとおりです。

1. v-else は、前の v-if または v-else-if が発生した場合にのみ発生します。条件が false の場合は有効になります。
2. v-else-if は、前の v-if 条件が false で、それ自体の条件が true の場合に有効になります。

コード例:

<template>
  <div>
    <h1 v-if="score >= 90">优秀</h1>
    <h1 v-else-if="score >= 60">及格</h1>
    <h1 v-else>不及格</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

上記のコード例では、score の値に応じて、v-if、v-else-if、v- で対応するコンテンツが表示されます。それ以外。

要約すると、v-if、v-show、v-else、および v-else-if は Vue で一般的に使用される条件付きレンダリング命令であり、これらは基本的に要素の表示と非表示を制御することによって実装されます。 。実装原理を深く理解することは、Vue の条件付きレンダリング機能をより適切に使用し、最適化するのに役立ちます。

以上がVue の高度なテクノロジー: v-if、v-show、v-else、v-else-if の実装原理を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。