v-for应用到卡片，实现卡片列表循环

实现效果

v-for 使用

使用elment ui中的el-col组件进行卡片循环，宽度为4每行能放6个卡片，el-row默认格栅是24

v-for根据所查数据的长度进行循环，index：指的是当前循环的下标，或者第几次循环，循环的数据包含在item内，由于图片储存的是整个地址，所以使用image-preview标签进行回显。

pagination标签是分页部分

 <div>
      <el-row>
        <el-col :span="4" v-for="(item, index) in this.tsxxbList " :key="item.tsid"  :data="tsxxbList">
          <el-card :body-style="{ padding: '10px' }">
            <image-preview :src="item.tsfm" :width="150" :height="150" />
            <div style="padding: 14px;">
              <span >{{item.tsname}}</span>
              <span class="myNote">{{item.tsjj}}</span>
              <div class="bottom clearfix">
                <span class="myNote">价格：{{item.tsjg}}</span><br>
                <el-button type="success" class="button2"  @click="submitForm2(item)">加入购物车</el-button>
                <el-button type="text" class="button2" @click="xqloog(item)">查看详情  </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

js代码部分

export default {
  name: "Index",
  dicts: ['tslx'],
  data() {
    return {
    
      // 图书信息表格数据
      tsxxbList: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tsname: null,
        tsjj: null,
        tslx: null,
        tsfm: null,
        tsxl: null,
        sjsj: null,
        tsjg: null,
        tszj: null,
        tssl: null,
        tsjf: null
      },
     
      // 表单参数
      form: [],
      tabledata:null,
      current_page:1,
      pagesize:8,
      listdata:{        },
      images: [
        { id:1, url: require("@/assets/ad1.jpg")},
        {id:2, url: require("@/assets/ad2.jpg")},
        // {id:3, url: require("@/assets/ad3.jpg")},
        {id:4, url: require("@/assets/ad4.jpg")},
        // {id:5, url: require("@/assets/ad5.jpg")}

      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listTsxxb(this.queryParams).then(response => {
        this.tsxxbList = response.rows;
        console.log(this.tsxxbList )
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};

根据getlist方法获取后端数据，返回数据存于row，将row的值付给tsxxblist