활성 탭이 변경되면 이미지 아이콘 변경
P粉448130258
2023-08-29 18:55:29
<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>
v-model
使用一些默认值,'tab'
使选项卡默认处于活动状态。 (我在v-model
탭의 이름 속성을 사용하세요. 그러나 원하는 고유 속성을 사용할 수 있습니다. )v-model
활성화된 탭을 확인하고 조건 연산자를 사용하여 아이콘을 업데이트하세요. (저는 더미 아이콘을 사용했습니다. 여러분의 아이콘을 사용해도 됩니다. )이 데모에서는 탭이 활성화되면 색상이 있는 비행 아이콘이 표시되고, 그렇지 않으면 검은색 비행 아이콘이 표시되는 것을 볼 수 있습니다.