vue中实现点击自己的元素展示相应的内容(循环的多条数组中)

1、如果是一级导航,划入只展示自己下面的内容可以通过index来进行找到相应的值

HTML:

<div class="class-one" v-for="(nav,index) in customMenus" :key="index">

 <span class="oneclass" @mouseover.stop="showOnedDescription(nav,index)" @mouseout.stop ="hideOneDescription()">{{nav.displayText}}</span>

<div class="describe" :class="returnNum === index ? 'oneclassdescrption' : ''"><span v-if="nav.description">{{nav.description}}</span><span  v-else>暂无描述信息</span></div>

</div>

CSS:

  .oneclassdescrption {
    display: block !important;
  }

JS:

methods:{
    //划入一级导航是否显示描述信息
    showOnedDescription : function(nav,index){
      // alert("index"+index)
        this.classOneNum = index;
        return false;
    },

   //划出隐藏描述信息
    hideOneDescription:function(){
      this.classOneNum = 999;
    }

},

computed:{
    returnNum(){
      return this.classOneNum
    }

}

2、如果是二级导航,划入只展示自己下面的内容可以通过id来进行找到相应的值

书写的内容同上

猜你喜欢

转载自blog.csdn.net/zezeadede555/article/details/88598749