vue中循环列表点击每一项显示绑定的不同模块

最新推荐文章于 2024-05-26 20:29:43 发布

原创最新推荐文章于 2024-05-26 20:29:43 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

115 篇文章

订阅专栏

105 篇文章

订阅专栏

BUG

86 篇文章

订阅专栏

本文介绍如何在Vue中通过点击事件控制循环生成的多个组件的显示与隐藏，实现特定模块的展示同时隐藏其他模块，提供代码示例及具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

我需要点击每一项，来显示其对应的模块，隐藏其他循环项的模块

解决：

注意，还有其他更简单的方法，我这里写的只是针对我场景来的。

vue:

       <div @click="joinGroupChart">加入群聊</div>
        <ul v-for="(item, index) in resulist" :key="index" style="float:left">
          <li @click="gotoResume(item-1)">简历{{ item }}</li>
        </ul>
        <ResumeTemplate1 v-if="resumeIndex[0].ry" />
        <ResumeTemplate2 v-if="resumeIndex[1].ry" />

js：

  data() {
    return {
      resulist:[1,2],
      resumeIndex:[
        {ry:false},
        {ry:false}
      ]
      
    };
  },
  components: {
    ResumeTemplate1,
    ResumeTemplate2
  },
  methods:{
    // 进入简历
    gotoResume(item){
    this.resumeIndex.forEach((items,indexs)=>{
      items.ry=false;
    })
    this.resumeIndex[item].ry=true




    },