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

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

Problem

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

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

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

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?'blue-ball':'red-ball'

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

관련 기사:

vue2.0에서 datepicker를 사용하는 방법에 대해

JavaScript 조정자 모드(자세한 튜토리얼)

jQuery에서 Dom 요소를 사용하는 방법은 무엇입니까?

jQuery에서 niceScroll 스크롤 막대 정렬 문제를 해결하는 방법

js의 Promise에 대한 지식 포인트에 대한 자세한 소개

JS 배열에서 요소를 삭제하는 방법

사용 방법 Node.js mysql 트랜잭션 자동 재활용 연결 구현

vue.js에서 Nginx를 사용하여 도메인 간 문제 해결

위 내용은 vue에서 v-for를 통해 배열을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!