Vue에서 객체 속성을 탐색하는 방법은 무엇입니까?

객체의 속성을 탐색하는 방법은 다음과 같습니다. 1. "v-for="(val,key,i) in obj" 구문을 사용하여 v-for 명령어를 사용하여 객체의 키와 값을 탐색합니다. "; 2. Object.keys( )를 사용하여 객체의 키와 값을 탐색합니다. 구문 "Object.keys(ob).forEach(key=>{...}"; 3. 키를 탐색합니다. "for...in" 루프를 통해 객체의 값, 구문 "for( let key in obj){...}".

이 튜토리얼의 운영 환경: windows7 시스템 , vue3 버전, DELL G3 컴퓨터입니다.

최근 객체 관련 지식에 대한 심층적인 연구를 통해 객체 순회는 주로 두 가지 상황이 있다는 것을 알았습니다. 하나는 페이지 내에서 순회하는 것이고, 다른 하나는 페이지에서 순회하는 것입니다. 이제 이 두 가지 상황에서 객체의 키와 값을 얻기 위해 객체를 순회하겠습니다.

사례 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 in 루프를 통해 객체의 키와 값을 탐색

    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 동영상 튜토리얼, 웹 프론트엔드 개발]

위 내용은 Vue에서 객체 속성을 탐색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!