このチュートリアルでは、Vue.jsの条件付きレンダリングについて学習します。

条件付きレンダリングとは何ですか?

条件付きレンダリングとは、特定の条件が true の場合、追加またはdomから要素を削除します。

Vueでは、条件付きで要素をレンダリングするためにv-ifディレクティブを使用する必要があります。

例を見てみましょう:

上記のコードでは、属性isActiveを持つv-ifディレクティブを追加しました。isActive属性はtrueであり、h1要素はdomにのみレンダリングされます。

v-ifディレクティブの後にv-elseディレクティブを拡張することもできます。

Hello Vuejs
 
Hey Vuejs

isActive属性が true の場合、最初のh1要素がレンダリングされ、それ以外の場合は 2 番目のh1要素が # レンダリングされます # #dom中。

v-else-ifブロックを使用してこれをさらに拡張することもできます。

Hello Vuejs
 
You're vuejs
 
Hey Vuejs

JavaScriptでは、v-else-ifディレクティブはelse-ifブロックと同様に機能します。

v-else要素の直後には、v-if要素またはv-if-else要素が続く必要があります。そうしないと機能しません。それを特定してください。

複数の要素を条件付きでレンダリングする方法

divタグでグループ化します。

javascript チュートリアル」

以上がVue.js の条件付きレンダリングを理解するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。