집 > 기사 > 웹 프론트엔드 > vue에서 v-for를 통해 배열을 처리하는 방법

vue에서 v-for를 통해 배열을 처리하는 방법

亚连원래의: 2018-06-11 12:06:432434검색

이 글에서는 vue 계산 속성과 배열 처리 시 v-for를 수행할 때 발생하는 버그 문제를 주로 소개합니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

Problem

bug: 컴포넌트에 무한 업데이트 루프가 있을 수 있습니다. 렌더링 함수 무한 루프

1. 처리할 배열(** ssq **):

bonus_code: [&#39;01&#39;, &#39;19&#39;, &#39;25&#39;, &#39;26&#39;, &#39;27&#39;, &#39;33&#39;, &#39;10&#39;]

2. 계산된 속성:

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3. v-for 코드:

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4. 배열의 처음 6개 숫자를 빨간색 공으로 렌더링하고 마지막 숫자(7번째 숫자)를 파란색으로 렌더링하고 싶습니다.

Answer

SegmentFault에 문의했습니다. 주소: vue 계산 속성 계산은 동시에 배열을 작동합니다

답변을 수락하고 코드를 다음으로 변경했습니다.

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

문제는 스플라이스가 무엇인지 이해하지 못했다는 것입니다. 원래 배열 변경 작업을 수행합니다.

해결책을 찾을 때 친구 Shaohui가 더 나은 해결 방법을 가르쳐주었습니다. 정말 감사합니다

즉, 클래스 이름 판단

1. 배열의 크기를 알면 클래스 이름을 만듭니다. 판단하세요. 인덱스가 인덱스보다 크면 파란색 클래스 이름을 표시하세요.

2. 처리된 HTML 코드:

<em v-for="(item, index) in ssq.bonus_code" :class="[&#39;tac&#39;,&#39;mr5&#39;,&#39;fl&#39;,index>5?&#39;blue-ball&#39;:&#39;red-ball&#39;]" >{{ item }}</em>

3. 추가된 코드:

index>5?&#39;blue-ball&#39;:&#39;red-ball&#39;

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 됩니다.

vue에서 v-for를 통해 배열을 처리하는 방법

관련 기사