vue の v-for ディレクティブはリストのレンダリングを完了します

1. リストの走査

最も基本的な使用例 1:

<!DOCTYPE html>

<html lang="ja">

<ヘッド>

    <メタ文字セット="UTF-8">

    <meta http-equiv="X-UA-compatible" content="IE=edge">

    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

    <title>リストのレンダリング</title>

    <script src="../../js/vue.js"></script>

</head>

<本文>

    <div id="アプリ">

        <ul>

            <li v-for="(name,index) 内の名前">

                {{インデックス}}-{{名前}}

            </li>

        </ul>

    </div>  

</本文>

<スクリプト>

    新しいVue({

        el:'#app',

        データ（） {

            戻る {

                名前:['張三'、'李斯'、'王武'、'趙柳']

            }

        },

    })

</スクリプト>

</html>

上記の例では、 v-for ディレクティブを通じて、データ内の names 配列がバインドされ、配列内の要素がリストの形式でトラバースされます。ここで、name は現在の配列のトラバース要素を表し、index は配列内の現在の要素名のインデックスです。出力効果は次のようになります。

v-for は、オブジェクト、文字列、指定された数値などを反復処理することもできます。のように：

<!DOCTYPE html>

<html lang="ja">

<ヘッド>

    <メタ文字セット="UTF-8">

    <meta http-equiv="X-UA-compatible" content="IE=edge">

    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

    <title>リストのレンダリング</title>

    <script src="../../js/vue.js"></script>

</head>

<本文>

    <div id="アプリ">

        <!-- オブジェクトをトラバースする -->

        <ul>

            <li v-for="(プロパティ、キー) in 学生">

                {{キー}}:{{プロパティ}}

            </li>

        </ul>

        <!-- 文字列をトラバースする -->

        <オル>

            <li v-for="char in str">{{char}}</li>

        </ol>

        <!-- カスタム出力 -->

        <ul>

            <li v-for="10 の数値">

                {{数値}}

            </li>

        </ul>

    </div>  

</本文>

<スクリプト>

    新しいVue({

        el:'#app',

        データ（） {

            戻る {

                学生：

                    名前:「李明」

                    年齢:23歳

                    住所:「大連」

                },

                str:'HelloWord'

            }

        },

    })

</スクリプト>

</html>

上記のコードの効果は次のとおりです。

2. Vueにおけるキーの役割

効果：

keyは仮想domオブジェクトの識別子です。データが変更されると、 vue新しいデータに基づいて新しい仮想 DOM を生成し、新しい仮想 DOM と古い仮想 DOM の違いを比較します。

差異比較ルール:

まず、古い仮想DOM内で新しい仮想DOMと同じkeyを見つけます
（１）仮想domの内容が変更されていない場合は、以前の実domを直接使用する
（２）仮想domの内容が失われた場合、新たな実domが生成され、ページ内の以前の実domが置き換えられる。
新しい仮想 DOM と同じキーが古い仮想 DOM 内に見つからない場合は、新しい実際の DOM が作成され、ページにレンダリングされます。

3. リストフィルタリング

リストフィルタリングは、リストを走査する前にリスト要素をフィルタリングし、表示要件を満たす次のような要素を選択します。

リスト内の「Zhang San」という名前の人を除外したいとします。(これは、computer または watch 属性を使用して実現できます)

<!DOCTYPE html>

<html lang="ja">

<ヘッド>

    <メタ文字セット="UTF-8">

    <meta http-equiv="X-UA-compatible" content="IE=edge">

    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

    <title>リストのレンダリング</title>

    <script src="../../js/vue.js"></script>

</head>

<本文>

    <div id="アプリ">

        <!-- リスト フィルター -->

        <!-- コンピュータ メソッド -->

        <ul>

            <li v-for="(name,intdex) in showNames">{{name}}</li>

        </ul>

        <!-- 監視メソッド -->

        <オル>

            <li v-for="(name,index) in displayName">{{name}}</li>

        </ol>

    </div>  

</本文>

<スクリプト>

    新しいVue({

        el:'#app',

        データ（） {

            戻る {

                名前:['張三', '李斯', '王武', '趙劉'],

                表示名：[]、

            }

        },

        時計：

            名前：{

                即時:true、

                ハンドラ(val){

                    this.displayName=this.names.filter((n)=>{

                        n!='張三'を返す

                    })

                }

            }

        },

        計算: {

            // 'Zhang San'という名前の人を除外したい場合 showNames(){

                this.names.filter((n)=>{ を返す

                    n!="張三"を返す

                })

            }

        },        

    })

</スクリプト>

</html>

効果：

これで、vue の v-for ディレクティブを使用してリストのレンダリングを完了する方法についての記事は終了です。vue の v-for ディレクティブの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: