uniapp が条件付きレンダリングとリスト レンダリングを使用する方法

Uniapp は条件付きレンダリングとリスト レンダリング メソッドを使用します: 1. [v-if] 命令はコンテンツの一部を条件付きでレンダリングするために使用されます; 2. [v-show] は条件に従って要素を表示します; 3. [ を使用します。 v -for] ディレクティブは、配列に基づいてリストをレンダリングします。

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨 (無料): uni-app 開発チュートリアル

uniapp で条件付きレンダリングとリスト レンダリングを使用する方法:

1. 条件付きレンダリング

1. v-if 命令は、コンテンツの一部を条件付きでレンダリングするために使用されます

Vue is awesome!
data:function() {
    return {
       awesome:true     //true或false
    }
}

2. v-else を使用して、 「else ブロック」

Vue is awesome!
Oh no
data:function() {
    return {
  awesome:true    //为true时正常显示，为false时显示Oh no
    }
}

3.v-else-if を追加します。v-if の「else-if ブロック」として機能し、継続的に使用できます

A
B
C
Not A/B/C
data:function() {
    return {
    type:'A'   //A或B或C  什么都不写的话则显示 Not A/B/C
    }
}

4.v -show、条件に基づいて要素を表示します

Hello!
data:function() {
    return {
 ok:true    //为true时显示Hello!，为false时则不显示
    }
}

5. v-if と v-show

v-if の違いは、「実際の」条件付きレンダリングです。これにより、イベント リスナーが条件付きブロック内のサブコンポーネントは、切り替えプロセス中に適切です。ランドは破壊され、再構築されました。 (実行条件がほとんど変化しない場合に使用します)

v-show 要素は常にレンダリングされ、DOM に残ります。 v-show は、要素の CSS プロパティ表示 (なし/ブロック) を切り替えるだけです。 (頻繁に切り替える場合に使用します)

2. リストのレンダリング

1. v-for 命令を使用して、配列に基づいてリストをレンダリングします。 items 内のフォーム item の特別な構文が必要です。ここで、 items はソース データ配列であり、 item は反復される配列要素のエイリアスです。

{{index}} : {{item.msg}}
data:function() {
return {
items:[
{msg:'Foo'},
{msg:'Bar'}
]
}
}

2. v-for でオブジェクトを使用する

{{key}} : {{value}}
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2020-3-10',
}

上記 2 つの例の結果は次のとおりです:

#関連する無料学習の推奨事項:

php プログラミング (ビデオ)

以上がuniapp が条件付きレンダリングとリスト レンダリングを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。