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}] 拡張を容易にし、実際のプロジェクトのニーズに近づけるために。

 
 
{{item.n}}
 
 
  

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

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

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

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

 
 
{{item.n}} 
index={{ index }}
 
key={{key}}
 
 
 
 
 {{item}}：{{key}}：{{index}} 
 
 
  

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

v-for="n in 10"

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

 {{list[i-1].n}} 
 
  

注:

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

 
{{item.n}} 
index={{ index }}
 
key={{key}}
 
remove this
 
 

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 サイトの他の関連記事を参照してください。