vue tab切换图片显示
时间: 2023-11-09 07:02:55 浏览: 52
可以通过绑定不同的图片地址来实现Vue tab切换图片显示。具体实现步骤如下:
1. 在data中定义一个变量,用于存储当前选中的tab的索引值,例如:currentIndex: 0。
2. 在模板中使用v-for循环渲染tab,并绑定点击事件,例如:@click="currentIndex = index"。
3. 在模板中使用v-bind绑定img标签的src属性,根据currentIndex的值来动态改变图片地址,例如:v-bind:src="currentIndex === index ? activeImgUrl : normalImgUrl"。
完整代码示例:
```
<template>
<div>
<div class="tab">
<div v-for="(item, index) in tabList" :key="index" @click="currentIndex = index" :class="{ active: currentIndex === index }">{{ item }}</div>
</div>
<div class="img">
<img v-bind:src="currentIndex === 0 ? 'https://xxx.com/normalImg.jpg' : 'https://xxx.com/activeImg.jpg'" alt="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
tabList: ['Tab1', 'Tab2']
}
}
}
</script>
<style>
.tab {
display: flex;
}
.tab div {
padding: 10px;
cursor: pointer;
}
.tab .active {
background-color: #ccc;
}
.img img {
width: 100%;
}
</style>
```