vue2.0은 상태 값에 따라 스타일 표시 방법을 변경합니다.

이제 상태 값을 기반으로 한 vue2.0 스타일 변경 표시 방법을 공유하겠습니다. 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

사용자가 프로세스 작업을 수행할 때 일반적으로 진행 중, 시작되지 않음, 완료로 구분됩니다. 프런트 엔드 페이지에는 해당 상태 구분이 표시되어야 합니다. 여기서 테스트한 것은 배경색 구분이다.

데모:

<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>

   statusText: {
    0: ['span-delay', '进行中'],
    1: ['span-finish', '已完成'],
    2: ['span-rough', '未开始'],
   },//显示状态

루프 순회 중에 상태를 할당하여 다양한 상태에서 다양한 배경색을 표시합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

이미지를 데이터베이스에 업로드하고 vue

vue.js 라우팅 사용 후 실패 문제 해결

방법 js

에서 데이터를 완벽하게 구문 분석합니다.

위 내용은 vue2.0은 상태 값에 따라 스타일 표시 방법을 변경합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!