<template>

<div class="icons">

<swiper :options="swiperOption">

<!-- slides -->

<swiper-slide v-for="(page,index) of pages" :key="index">

<div class="icon" v-for="item of page" :key="item.id">

<div class="icon-img">

<img :src="item.imgUrl" alt="">

<p class="icon-text">{{item.desc}}</p>

</div>

</div>

</swiper-slide>

<!-- 如果这里使用的是v-show="showPagin",则能够实现效果 -->

<div class="swiper-pagination" slot="pagination" v-if="showPagin"></div>

</swiper>

</div>

</template>

<script>

export default {

name: 'HomeIcons',

props: {

iconList: Array

},

data () {

   return {

     swiperOption: {

       pagination: '.swiper-pagination'

     }

   }

 },

computed: {

pages () {

     const pages = []

     this.iconList.forEach((item, index) => {

       const page = Math.floor(index / 8)

       if (!pages[page]) {

         pages[page] = []

       }

       pages[page].push(item)

     })

     return pages

   },

showPagin () {

     if (this.iconList.length <= 8) {

       return false

     } else {

       console.log('true')//能够打印出true

       return true

     }

   }

}

}

</script>

我去翻了下资料，只知道v-if是惰性移除添加dom元素，而v-show是控制display的显示隐藏。

文档还说 “v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。”

我知道他第一次页面渲染的时候，iconList数组为空，所以v-if="false"，但是当axios获取数据的时候，iconList=9，

那么v-if="true"，可是为啥没有显示在页面？？不理解。