활성 탭이 변경되면 이미지 아이콘 변경
P粉448130258
P粉448130258 2023-08-29 18:55:29
0
1
615
<p>현재 이미지 아이콘과 텍스트가 포함된 4개의 탭이 있는 v-tab이 있습니다. 그러나 탭이 활성화되면 활성 탭 아이콘이 다른 이미지로 변경되어야 합니다. 어떻게 해야 합니까? </p> <pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu"> <v-탭 v-for="항목 내 항목" :key="item.id" > <img :src="item.icon" {{ 상품명 }} </v-tab> </v-탭> 데이터() { 반품 { 탭: null, 항목: [ { 아이콘: "/planeInactive.svg", 이름: "평면" }, { 아이콘: "/hotelInactive.svg", 이름: "호텔" { 아이콘: "/planehotelInactive.svg", 이름: "비행기 + 호텔" }, { 아이콘: "/planeInactive.svg", 이름: "학생" }, ], }; },</pre></p>
P粉448130258
P粉448130258

모든 응답(1)
P粉413704245
  1. v-model 使用一些默认值,'tab' 使选项卡默认处于活动状态。 (我在 v-model 탭의 이름 속성을 사용하세요. 그러나 원하는 고유 속성을 사용할 수 있습니다. )
  2. 이것을 사용하여 v-model 활성화된 탭을 확인하고 조건 연산자를 사용하여 아이콘을 업데이트하세요. (저는 더미 아이콘을 사용했습니다. 여러분의 아이콘을 사용해도 됩니다. )

이 데모에서는 탭이 활성화되면 색상이 있는 비행 아이콘이 표시되고, 그렇지 않으면 검은색 비행 아이콘이 표시되는 것을 볼 수 있습니다.

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿