标签列表筛选

最新推荐文章于 2024-09-02 17:34:07 发布

qq_24592833

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量305

点赞数 4

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_24592833/article/details/136377654

版权

本文介绍了一个使用Vue.js构建的动态内容列表，用户可以通过点击菜单按钮筛选科技、财经和娱乐类别的文章。代码展示了如何利用`v-for`和`ref`实现数据绑定和筛选功能。

摘要由CSDN通过智能技术生成

<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>

效果如下