vue循环渲染动态展示内容案例（“更多”按钮功能）

当我们在网页浏览时，常常会有以下情况：要展示的内容太多，但展示空间有限，比如我们要在页面的一部分空间中展示较多的内容放不下，通常会有两种解决方式：分页，“更多”按钮。

今天我们的案例用于更多按钮的功能实现。

比如我们要展示这样的效果：

红框框是我们要展示的内容，当我们点击更多时，就会依次排列更多的红色框框。

 比如我们有这样一些内容要展示：

const newCourseList = ref([
  {id:"1",name:"英特尔实时计算中级课程",type:"",videoNum:"10",studyNum:"5946",imgUrl:"src/assets/images/newcourse/newcourse1.png"},
  {id:"2",name:"英特尔实时计算初级课程",type:"",videoNum:"10",studyNum:"6682",imgUrl:"src/assets/images/newcourse/newcourse2.png"},
  {id:"3",name:"OpenCV高级认证课程",type:"",videoNum:"10",studyNum:"8963",imgUrl:"src/assets/images/newcourse/newcourse3.jpg"},
  {id:"4",name:"OpenCV初级认证课程",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse4.jpg"},
  {id:"5",name:"英特尔® OpenVINO™工具套件初级课程——2024焕新版",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse5.jpg"},
  {id:"6",name:"英特尔® OpenVINO™工具套件中级课程",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse6.png"},
  {id:"7",name:"英特尔® OpenVINO™工具套件高级课程",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse7.jpg"},
  {id:"8",name:"英特尔® Smart Edge Open初级认证课程",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"9",name:"1",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"10",name:"2",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"11",name:"3",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"12",name:"4",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"13",name:"5",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"14",name:"6",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"15",name:"7",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
  {id:"16",name:"8",type:"",videoNum:"10",studyNum:"5869",imgUrl:"src/assets/images/newcourse/newcourse8.png"},
])

一共16条数据，但是我们最初始要展示七条数据，当单击一次更多按钮要展示13条数据。也就是每次单击都再展示6条数据。

首先我们要对布局分析，我们可以将整个布局看成一行，左边第一个元素独占一列。右边的其他元素可以占整体一个列，然后再分行分列。这里我们用到elementui中的格子模式，每行占24个格子。整体看，每行有4个元素。比如第一个元素我们给6个格子。那么其他位置我们需要每行展示3个元素，后边自己分一行就又是24个格子，三个元素，每个元素8个格子。

我们要确定，前七条数据先怎么展示出来，这里有个问题就是第一个框框的大小跟其他的不一样，而且第一个一直就是那唯一的一个，所以我们就不将第一个元素写在循环渲染内，除了第一个，其他都用循环写。

那么第一个元素我们可以这样写：

<el-row :span="24" style="width: 1240px;margin: 0px auto;" :gutter="15">
        <el-col :span="6">  
          <div style="height: 530px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;">
          <RouterLink :to="`/course/coursecontent/${newCourseList[0].id}`">
            <img style="width: 100%;height: 400px;border-radius: 5px 5px 0px 0px;" v-img-lazy="newCourseList[0].imgUrl" alt="" />
            <div>
              <div style="padding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ newCourseList[0].name }}</div>
              <div style="font-size: 12px;margin-left: 20px;" >
                <el-icon size="20" style="position:relative;top:5px;margin: 0 5px 0 0px">
                  <VideoCamera/>
                </el-icon>
                <span>{{newCourseList[0].videoNum}}</span>
              </div>
            </div>
          </RouterLink>
        </div>
      </el-col>
<el-row>

说明：el-row是elementui中的行元素代表一个行，el-col代表一个列，:span后面是代表这个行/列占得格子数。

newCourseList的第一个元素也就是newCourseList[0]，打点调用每条数据中的内容。上述代码就将第一个元素展示出来了。

其他元素我们就需要用到循环渲染了

因为第一个元素占了6个格子，后面其他元素一起占一列，那就是18个格子。内部再分行，那么每行又是24个格子，所以一个元素是8个格子。

      <el-col :span="18">
        <el-row :span="24">
          <el-col :span="8" v-for="course in newCourseList" :key="course.id">
            <div style="height: 256px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;">
          <RouterLink :to="`/course/coursecontent/${course.id}`">
            <img style="width: 100%;height: 160px;border-radius: 5px 5px 0px 0px;" v-img-lazy="course.imgUrl" alt="" />
            <div>
              <div style="padding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ course.name }}</div>
              <div style="font-size: 12px;margin-left: 20px;" >
                <el-icon size="20" style="position:relative;top:5px;margin: 0 5px 0 0px">
                  <VideoCamera/>
                </el-icon>
                <span>{{course.videoNum}}</span>
              </div>
            </div>
          </RouterLink>
        </div></el-col>
         
        </el-row>
       
      </el-col>

我们在内部列中使用了循环渲染，这样实现了显示的功能，但是有个问题：这样写右侧不会只显示6个元素，而是将所有数据展示出来。

为了解决这个问题我们可以建立一个新对象，来装我们要展示的六条数据，然后去循环展示这个新对象，注意：循环时是从第二条数据开始的，因为第一条数据不参与循环。

创建对象：

const listCopy=ref(newCourseList.value.slice(1,7))

上述代码我们创建了一个对象listCopy，初始值用来装newCourseList的下标值为1-6的数据。

修改后的代码：

<el-col :span="18">
        <el-row :span="24">
          <el-col :span="8" v-for="course in listCopy" :key="course.id">
            <div style="height: 256px;width: 100%;background-color: #fff;border-radius: 5px;margin-bottom:10px;">
          <RouterLink :to="`/course/coursecontent/${course.id}`">
            <img style="width: 100%;height: 160px;border-radius: 5px 5px 0px 0px;" v-img-lazy="course.imgUrl" alt="" />
            <div>
              <div style="padding: 20px; font-size: 16px;font-family: PingFangSC-Regular, sans-serif;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ course.name }}</div>
              <div style="font-size: 12px;margin-left: 20px;" >
                <el-icon size="20" style="position:relative;top:5px;margin: 0 5px 0 0px">
                  <VideoCamera/>
                </el-icon>
                <span>{{course.videoNum}}</span>
              </div>
            </div>
          </RouterLink>
        </div></el-col>
         
        </el-row>
       
      </el-col>

接下来又有一个问题，就是怎么在单击“更多”时，多展示六条数据。

我们可以为“更多”设置一个单击事件，然后触发一个函数修改被循环的对象：listCopy的值。

<el-row style="background-color:#f6f8fb; height: 150px;" justify="center" align="middle" type="flex">
      <div style="width:200px;background: transparent;border: 1px solid #999;color: #999;text-align: center;font-size: 12px;padding: 18px 75px;border-radius: 4px;" @click="changeList()">更多竞赛</div>
  </el-row>

我设置了名为changeList的函数。

接下来我们需要考虑两种情况：

1、剩余数据大于6条，2、剩余数据不足6条

第一种情况，我们需要控制listCopy的数据只增加6条。

第二种情况，剩余几条增加几条就可以。

函数内部代码：

const changeList=()=>{
  let count=listCopy.value.length+1;
  let maxCount=newCourseList.value.length-1;
  let sub=maxCount-count>6?6:maxCount-count;

  for(let i=0;i<sub;i++){
    listCopy.value.push(newCourseList.value[count+i])
  }
  
}

说明：count变量用来装我们需要从newCourseList的哪个下标值开始增加给listCopy。maxCount用来装剩余数据的最大下标值。sub用来装我们要追加几条数据：如果大于6，sub就是6，如果不大于6就是剩余数据的最大下标值减去从哪个下标值开始，也就是还剩几条。

for循环就是对listCopy对象的数值进行追加。

例如第一次：count的值为7，也就是从id为8的数据开始追加给listCopy。maxCount值为15，一共16条，最大下标值为15。sub值为6，因为maxCount-count=15-7=8,8>6所以sub的值为6。那么for循环将执行6次。第一次向listCopy中push：newCourseList下标值为7的数据，第二次是newCourseList下标值为8的数据。

这样我们就实现了最初的功能。

页面效果：

单击一次：

 

单击两次：