Vue.js の条件付きレンダリングを理解するにはどうすればよいですか? (コード例)

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

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

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

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

例を見てみましょう:

<template>
  <div>
  <!-- v-if="javascript expression" -->
   <h1 v-if="isActive">Hello Vuejs</h1>
   <button @click="isActive= !isActive">点击</button>
  </div>
</template>

<script>

export default{
    data:function(){
        return{
            isActive:false
        }
    }
}
</script>

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

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

 <h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>

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

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

<h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else-if="isActive && a.length===0">You&#39;re vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>

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

注:

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

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

複数の要素を条件付きでレンダリングする必要がある場合があります。この場合は、Together で要素を結合する必要があります。

<template>
  <div v-if="available">
    <h1>Items are available</h1>
    <p>More items in the stock</p>
  </div>
  <div v-else>
    <h1>Items are not available</h1>
    <p>Out of stock</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      available: true
    };
  }
};
</script>

ここでは、複数の要素を

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

関連する推奨事項: 「

javascript チュートリアル 」

この記事は、Vue.js の条件付きレンダリングの詳細な説明です。助けを必要としている友達に役立つことを願っています!

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