을 사용하여 데이터를 표시할 때 가시성을 높이기 위해 사용하기 쉬운 얼룩말 무늬 (스트라이프?). 보기 쉽고 사용하기 쉽습니다!

↓이런 녀석

모두 좋아하는 Bootstrap에서도 「.table-striped」라고 하는 class가 이런 식으로 되어 있는 것입니다만, 어쨌든 편리함이 좋은 것입니다.

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}

해보자

그럼 만들어 봅시다. 을 여러 줄 쓰고 싶지 않으므로 Vue.js로 씁니다.
세계 최대급의 동물을 무게로 순위를 매긴 10위까지를 표시할 수 있었습니다. 멋진 얼룩말 무늬입니다! 기분이 좋다!

See the Pen ZYVwag by ryo_hisano ( ＠료_히사노 )
on CodePen .

표시/숨기고 싶다

TODO 앱과 같이 체크한 행을 지우고 싶은 기분이 되었으므로 적당한 class를 만들고 선택한 것을 숨기려고 했습니다.

See the Pen qzKRbg by ryo_hisano ( ＠료_히사노 )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

완성! 라고 생각해 체크 넣어 가면… 전혀 아름답지 않게 되었다! 왜...

↓복수 체크 넣었을 때↓

일단 쓰러져 생각해 봅시다. MDN에 따르면 다음과 같습니다.

CSS :nth-of-type() 의사 클래스는 형제 요소 그룹 내에서 지정된 유형의 요소를 위치에 따라 선택합니다.

:nth-of-type() - CSS: 캐스케이딩 스타일시트 | MDN

CSS로 멋지게 숨긴 곳에서 HTML 구조에 변함이 없기 때문에 이와 같이 됩니다. 당연히 당연합니다. 조금 전의 캡쳐로 가면, 이렇게.

어떻게 할까? (악수)

태그를 다른 태그로 둘러싸면 어떨까요? 둘러싸인 태그는 형제 요소가 없어질 것이므로, 건너뛴 상태에서 얼룩말 무늬가 적용되는 것은?

적절하게

에 id를 흔들어 그것을 기반으로 로 둘러싸거나 해제하는 함수를 만들어 봅니다 (jQuery에서 말하는 곳의 wrap/unwrap적 나).

어떻게 잘 했던 것 같습니다.

See the Pen xozgVQ by ryo_hisano ( ＠료_히사노 )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

라고는 하지만...

자유 태그로 둘러싸는 등, 몹시 기분 나쁘습니다!

그러고 보니 Vue.js를 사용하고 있었던 것이었습니다! 이상합니다!

<tr v-for="data in visibleData" :key="data.id">

computed: {
    visibleData() {
        return this.datas.filter(function(data) {
            return !data.hide;
        });
    }
}

Vue.js라면 행 삭제도 복원도 간단합니다.

See the Pen JQZEKw by ryo_hisano ( ＠료_히사노 )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

요약

Vue.js 이외의 케이스에서도, 행의 삭제와 행의 부활을 할 수 있도록 만들면, 동적으로 행이 증감하는

에서도 문제없이 얼룩말 무늬를 사용하는 것이 가능하네요!

참고

스타일 가이드 — Vue.js