Vue でオブジェクトのプロパティをトラバースする方法は何ですか?

オブジェクト属性を走査する方法は次のとおりです。 1. v-for 命令を使用して、オブジェクトのキーと値を走査します。構文は「v-for="(val,key,i) in obj」です。 "; 2. Object.keys() を使用してオブジェクトのキーと値を走査します。構文は "Object.keys(ob).forEach(key=>{...}"; 3. キーを走査します。 「for...in」ループを介したオブジェクトの値、構文「for(let key in obj){...}」。

このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

最近、オブジェクト関連の知識を徹底的に研究したところ、オブジェクト トラバーサルは主に 2 つの状況に分けられることがわかりました。はページ内を走査しており、もう 1 つはメソッド内でオブジェクトを走査しています。次に、これら 2 つの状況から始めます。それぞれのケースで、オブジェクトを走査して、オブジェクトのキーと値をそれぞれ取得します。

ケース 1: ページ内のオブジェクトを走査してオブジェクトのキーと値を取得する

変数を定義する

  obj:object={a:1,b:2,c:3};//用于在页面中调用

使用ページ内の v-for を使用してオブジェクトのキーと値を走査します。

    <div>
      <h1>
        获取对象的key和value      </h1>
      <p>key:{{key}}-----value:{{value}}</p>
    </div>

効果を達成するには

ケース 2: メソッド内でオブジェクトを走査してオブジェクトのキーと値を取得する

オブジェクト変数を定義する

objNum:object={1:'a',2:'b',3:'c'};

方法 1: Object.keys() メソッドを使用して、オブジェクトのキーと値を走査します。

//实现思路：通过 Object.keys()对象方法将对象的key转化为一个数组，再通过forEach遍历出数组的值，再通过[key]去获取对象的value值。
    Object.keys(this.objNum).forEach(key=>{
      console.log('key:',key,'value:',this.objNum[key]);
  }

メソッド 1 の効果は次のとおりです。

方法 2: ループ内の for を介してオブジェクトのキーと値をトラバースします##

    for(let key in this.objNum){
    //for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
      console.log('key',key);
      console.log('value',this.objNum[key ]);
    }

方法 2 で次の効果​​を実現します:

#[関連する推奨事項:

vuejs ビデオ チュートリアル

、Web フロントエンド開発]

以上がVue でオブジェクトのプロパティをトラバースする方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。