vue 判断导航长度点击展开更多

vue 判断导航长度点击展开更多

html代码

<div v-for="(item,index) in showList" v-show="index<num" :id="index" :key="index"  @click="singleItemList(item.id),changSemester(index)">
            <img :src="item.logo" alt="" style="width:22px;height:22px;float:left">
            <p style="float:left;margin-top:4px;margin-left:10px;">{{ item.name }}</p>
          </div>
          <span style="position: relative;top: 4px;cursor:pointer;" @click="showMore">{{ txt }}</span>

在data里面定义一个 num的长度，和定义一下 txt的初始化

data() {
    return {
      showList：[],
      isShow: true,
      num: 7,
      txt：‘更多’
      ｝
      ｝

在methods调用click方法

showMore() {
      this.isShow = !this.isShow
      this.num = this.isShow ? 7 : this.showList.length
      this.txt = this.isShow ? '更多' : '收起'
    },```