需求&问题
做一个展示页面，有四张卡片显示在同一行，卡片可点击跳转到详情页。一开始是用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；之后数据加载正常渲染。这里主要解决浏览器控制台报错的问题。
v-for： 循环遍历list对象数组，每一个对象是一个卡片。
详细信息参考大佬博客，总结的很全面：
vue之v-for指令
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/157353.html
