有时我们写页面时可能会遇到要求图片展示的，类似下图这种

如果是用vue写前端的话那就很方便了，vue中的v-for指令（列表渲染）
这里先附上v-for官方文档

---

以下面这个小demo为例：

HTML代码：

<template>
  <div id="app">
    <div class="card" v-for="message in messages" :key="message.id" v-bind:title="message.title" v-bind:desc="message.desc">
      <img class="img" :src="message.src"><br>{{message.desc}}
    </div>
  </div>
</template>

这里有几个要注意的点：
1.上面代码第三行的div外面要再套一层div，因为v-for不能用于根元素（root element），因为v-for是个循环，它返回更多的元素。导致无法渲染。假如去掉上面第二行div，则报以下错：

2. 这里循环输出图片的话一定要这样：<img class="img" :src="message.src">

这样是不行的<img src="{{data.src}}"> <<———反例。

JS代码

<script>
export default {
  data(){
    return {
        messages:[
          {
            id: '1',
            title: 'yiyiyi',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-15/0918251905f6057842.jpg'
          },
          {
            id: '2',
            title: 'ererer',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/course/2019/03-26/184214683df1136310.jpg'
          },
          {
            id: '3',
            title: 'sansansan',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-15/0918146150a9565117.jpg'
          },
          {
            id: '4',
            title: 'sisisi',
            desc: '阿萨德',
            src: 'http://www.gulixueyuan.com/files/default/2018/06-14/1709051b4c3c309882.jpg'
          },

        ]
      }
  },
  
}
</script>

因为我这个代码没和后台交互，只是临时写的，所以就先这样，如果是前后端分离的项目要向后台获取信息的话建议用axios，相对于ajax它能自动转化json串，具体可以百度下，这里暂且不写了。

CSS代码：

<style>
  #app{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }
  .card{
    /*height: 300px;*/
    background-color: #ffffff;
    padding: auto;
    margin: auto;
  }
  .card .img{
    /*height: 250px;*/
    height: auto;
    vertical-align: middle;
    max-width: 100%;
  }


  *{
    background-color: #42b983;
  }
</style>

考虑到图片排版的话不自适应手机端可能体验很差，故建议flex布局。
demo很简单，css代码也写得很烂，大佬们多多指教[握手]