<template>
<div class="con">
<div class="menu-list">
<button v-for="(item,index) in menuList" :key="index" @click="menuBtn(item)" :class="{'btn-sel': menuSel === item}">{{item}}</button>
</div>
<div class="con-list">
<div class="item-li" v-for="(item,index) in list" :key="index">
<span>{{item.targetValue}}</span> <br>
<p>{{item.com}}</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const menuSel = ref('全部');
const menuList = ref(['全部','科技','财经','娱乐']);
const itemData = ref([
{targetValue:'科技', com:'麒麟加持!刚曝光这华为超大杯,太炸裂了'},
{targetValue:'科技', com:'美英日等10国联合声明发展6G,美媒:想与中国“科技竞赛'},
{targetValue:'科技', com:'黔西南人不是氪金传奇玩不起,而是一人一鬼服更有性价比!'},
{targetValue:'财经', com:'新政节后催生深圳楼市小阳春? 深圳银行人士:房贷没有想象中那么暖'},
{targetValue:'财经', com:'转眼已三年,核心资产的风还会回来吗?'},
{targetValue:'娱乐', com:'王菲谢霆锋机场撒糖,千元穿搭火上热搜,前夫李亚鹏却直播哭穷'},
{targetValue:'娱乐', com:'王阳谈春晚两个唱歌节目,直言有寓意,希望能和演戏一样好好表现'},
{targetValue:'娱乐', com:'侃爷妻子或因穿着暴露坐牢,面临十二万人民币罚款,还因侵权被起诉'},
{targetValue:'娱乐', com:'李亚鹏否认直播哭穷,全网悬赏找证据,称江湖上血雨腥风经历多了'},
{targetValue:'娱乐', com:'米兰时装周第二波:吴昕认不出,郭晶晶高贵松弛,刘诗诗美到我了'},
]);
const list = ref([])
list.value = itemData.value
const menuBtn = ((a)=>{
menuSel.value = a;
if(a === '全部'){
list.value = itemData.value
}else {
list.value = itemData.value.filter((item)=> item['targetValue'].includes(a))
}
})
</script>
<style scoped>
.btn-sel{
color: red
}
</style>
效果如下