以下是我的代码
<template>
<span v-for="(item, index) in title" :key="index" :class="{ active: num == index, tabs: true }" @click="num = index">
{{ item }}
</span>
</template>
<script setup lang="ts">
defineProps<{
title: string[]
}>()
const num: any = ref('p')
watch(num, (newValue, _oldValue) => {
// 监听新值用于后期利用这个值将值进行子传父
console.log(newValue);
})
</script>
<style lang="less" scoped>
.active {
color: yellow;
}
.tabs {
cursor: pointer;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
再优化一下加上图片切换
<template>
<span v-for="(item, index) in title" :key="index" :class="{ active: num == index, tabs: true }" @click="num = index">
<span :class="{ active1: num == index }">{{ item }}</span>
</span>
</template>
<script setup lang="ts">
defineProps<{
title: string[]
}>()
const num: any = ref('p')
watch(num, (newValue, _oldValue) => {
// 监听新值用于后期利用这个值将值进行子传父
console.log(newValue);
})
</script>
<style lang="less" scoped>
.active {
color: yellow;
}
.tabs {
cursor: pointer;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
background-image: url(../.../../../../public/R-C111.jpg);
background-size: 100%;
}
.active1 {
display: inline-block;
width: 120px;
height: 50px;
background-image: url(../.../../../../public/R-C.jpg);
background-size: 100%;
}
</style>
最终效果