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

需求：

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

解决：

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

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




    },

最后

以上就是活力冷风为你收集整理的vue中循环列表点击每一项显示绑定的不同模块的全部内容，希望文章能够帮你解决vue中循环列表点击每一项显示绑定的不同模块所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。