需求&问题

做一个展示页面，有四张卡片显示在同一行，卡片可点击跳转到详情页。一开始是用el-col写了四个，考虑到后期可能更多卡片，所以准备用v-for循环遍历list对象数组来添加卡片。
顺带提一句，使用el-col是为了定义屏幕自适应，不同屏幕尺寸下一行显示几张卡片。

代码

<el-row :gutter="40" style="margin-top: 30px" >  <!--分栏间隔-->
   <el-col :xs="12" :sm="12" :md="12" :lg="6" class="card-col" v-if="list" v-for="(pc, i) of list" >  <!--共24份，xs超小型设备，sm小屏设备，md中屏，lg大屏-->
     <pc-card :name="pc.name" :ip= "pc.ip" />
   </el-col>
</el-row>
...

data() {
    return {
      list: [],
    }
}

解释

v-if：由于异步请求数据，初始化页面时list数组尚且为空，此时浏览器控制台会报错undefined；之后数据加载正常渲染。这里主要解决浏览器控制台报错的问题。

参考1
参考2

v-for： 循环遍历list对象数组，每一个对象是一个卡片。

详细信息参考大佬博客，总结的很全面：
vue之v-for指令