效果图:
前端:
<template>
<div>
<ul class="list-box">
<li
@click="clickCategory(1), (cur = 1)"
:class="{ farmworkactive: categoryIndex == 1 }"
>
<i class="iconfont iconFrame"></i> 样式一
</li>
<li
@click="clickCategory(2), (cur = 2)"
:class="{ farmworkactive: categoryIndex == 2 }"
>
<i class="iconfont iconsuo"></i> 样式二
</li>
</ul>
</div>
<div>
<div v-show="cur == 1" class="person-msg-box">
1111
</div>
<div v-show="cur == 2" class="person-msg-box">
2222
</div>
</div>
</template>
js:
<script lang="ts" setup>
import {ref} from 'vue'
const cur = ref([1])
const categoryIndex = ref([1])
const clickCategory = (index) => {
// 这里我们传入一个当前值
categoryIndex.value = index;
}
</script>
样式可自行定义