VUE tab面板切换 伴随点击选中变色

效果图：

前端：

<template>
<div>
			  <ul class="list-box">
			        <li
			          @click="clickCategory(1), (cur = 1)"
			          :class="{ farmworkactive: categoryIndex == 1 }"
			        >
			          <i class="iconfont iconFrame"></i>&nbsp; 样式一
			        </li>
			        <li
			          @click="clickCategory(2), (cur = 2)"
			          :class="{ farmworkactive: categoryIndex == 2 }"
			        >
			          <i class="iconfont iconsuo"></i>&nbsp; 样式二
			        </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>

样式可自行定义