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><paginationv-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

v-for应用到卡片，实现卡片列表循环相关推荐

php文章列表样式,PHPCMS V9 文章列表循环样式自定义方法
在此,再次分享Whidy的文章"phpcms文章列表循环不同样式制作方法",下面CMSYOU来与大家具体分享,原地址为http://whidy.net/phpcms-list-wi ...
Python坑:bool是int的子类、列表循环中的变量泄露、lambda在闭包中会保存局部变量、重用全局变量
bool是int的子类 a = True print isinstance(a, int) print True == 1 print False == 0 运行结果: True True True ...
微课|中学生可以这样学Python（例6.2）：列表循环左移位
适用教材: 董付国,应根球.<中学生可以这样学Python>.清华大学出版社,2017. 第6章函数 6.6 精彩例题分析与解答例6.2 列表循环左移位京东购买链接:https ...
【实用】JavaScript中Video使用详解过程（多视频列表循环播放）
做过一个项目里有用到插入多个视频类似列表循环播放的,视频信息是从后台数据库传入的核心JS代码片段 <script type="text/javascript">var ...
小程序`uin-app`之列表循环
首先: 我们先来复习一下vue的列表循环 . 通过v-for指令基于一个数组来渲染一个列表. 基础语法就是 v-for="(item,index )in items" :ke ...
91.video.ws index php_如何利用videojs实现视频列表循环播放（完整代码）
本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 庭审直播 .video-js { /* posit ...
微信小程序笔记-列表循环的基本要点
新手笔记,大佬如果发现有误,本人积极改正,谢谢大家了QAQ 长话短说,直入正题,小程序的列表循环和可以分成四个主要的组件但我们要先明白一个道理:先寻找到你想要循环的目标,才能循环,找不到,程序怎么循 ...
电影优惠卡html页面,一款HTML5简约风的电影卡片模板（列表）
HTML 导入代码模板: Selling Fast +2 Mon, APR 09, 7:00 PM /> This Thing Called Life: A Celebration of Pri ...
【固定资产】要在卡片和卡片管理上显示计量单位
用友固定资产模块默认只能在资产类别里设置一个单位,在录入卡片时,默认使用对应资产类别的单位(每个类别仅1个单位),有的客户可能一个类别下有多个计量单位,例如房屋建筑类下面计量单位有栋.平方米等,如何实 ...

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

v-for应用到卡片，实现卡片列表循环相关推荐

最新文章

热门文章