vue v-データ処理を説明する例

以前に、vue コンポーネントでの v for コマンドの紹介と、v-for を使用する際のアラームの問題の分析について説明しました。この記事では、vue v-for データ処理と v の基本的な使用方法について説明します。 -for: 走査するには v-for= "リスト内の項目" または v-for="リストの項目" を使用します。 list:list:[{n:1},{n:2},{n:3}, {n:4},{n :5},{n:6}] 拡張を容易にし、実際のプロジェクトのニーズに近づけるために。

 <p id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
            }
        })
    </script>

v-for は、キーとインデックスの 2 つのパラメーターを与えます

トラバースされたデータは配列とオブジェクトに分割され、個別に処理される必要があります

配列の下にキー値はありません

そしてパラメーターのキー値の実際の表示は、効果は次のとおりです:

<p id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
            </li>
        </ul>
        <p>
            <p v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </p>
        </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

v-for は等しい数の反復をサポートします

v-for="n in 10"<br>

これを使用すると、m 値を制御するだけで段階的にデータをロードできます

  <p v-for="i of m">
                {{list[i-1].n}}
            </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                m:3,
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

注:

オブジェクトをトラバースするときにこのバインディング コンポーネントを使用することはできません。インデックスまたはその他の特性を渡すことのみが可能です。関数の値を処理して現在のリストを選択し、操作を実行します

<ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
                <p v-on:click="removethis(index)">remove this</p>
            </li>
        </ul>

<br>

methods:{
         removethis:function(index){
             this.list.splice(index,1)

データ配列 app.list[1]={n:33} への直接代入操作はページ更新をトリガーできません

そのため、vue js は Vue.set を提供します。 (app .list,1,{n:33}) 配列データの更新メソッド

関連する推奨事項:

v-for 使用時の Vue コンポーネントの紹介とアラームの問題の分析

Vue.js の一般的なコマンドのチュートリアルループ内でv-for命令を使用する

vue.js命令v-forの使い方とインデックス取得

以上がvue v-データ処理を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。