• 查看
    • 编辑修改
    • 首页
    • UNITY
    • NODEJS
    • PYTHON
    • AI
    • GIT
    • PHP
    • GO
    • CEF3
    • JAVA
    • HTML
    • CSS
    devbox
    从前慢现在也慢
    这个屌丝很懒,什么也没留下!
    关注作者
    热门标签
    • jquery
    • HTML
    • CSS
    • PHP
    • ASP
    • PYTHON
    • GO
    • AI
    • C
    • C++
    • C#
    • PHOTOSHOP
    • UNITY
    • iOS
    • android
    • vue
    • xml
    • 爬虫
    • SEO
    • LINUX
    • WINDOWS
    • JAVA
    • MFC
    • CEF3
    • CAD
    • NODEJS
    • GIT
    • Pyppeteer
    • article
    热门文章
    • 1py3 nonlocal及函数嵌套调用_no binding for nonlocal 'ans' found
    • 2探索数据之海:pgvectorscale,为AI加速的向量数据库增强工具
    • 3一文读懂页面布局
    • 4Java爬虫:通过有道翻译获取单词和词组意思_jsoup读取有道翻译
    • 5GiantPandaCV | FasterTransformer Decoding 源码分析(六)-CrossAttention介绍_cross attention源码
    • 6从统计学、到机器学习和ChatGPT
    • 7(python)Pyinstaller应用程序打包以及相关问题_pyinstaller打包 自定义的pyecharts和wxpython
    • 8STM32使用Wifi连接阿里云_阿里云一键wifi设置
    • 9Windows11如何改用微软账户和本地账户登录(视频方案)_win11本地账户登录
    • 10FPGA学习和发展方向
    当前位置:   article > 正文

    vue动态列表响应式布局_vue响应式商品详情页面

    作者:从前慢现在也慢 | 2024-07-23 23:52:19

    赞

    踩

    vue响应式商品详情页面

     

    问题描述:选择哪个模块就显示什么

    思路:通过标识来判断是否选择,动态控制列表长度及样式

    页面渲染代码:

    1. <div class="header_tabs">
    2. <ul>
    3. <li v-for="(item,index) in headertabs" :key="index" :class="setClass(headertabs)">
    4. <el-card class="update-log" style="text-align:center">
    5. <div slot="header" class="clearfix">
    6. <i :class="item.class"></i>&nbsp;&nbsp;<span>{{item.name}}</span>
    7. </div>
    8. <div class="body" style="font-size:16px;font-weight:bold">
    9. {{item.tatol}}
    10. </div>
    11. </el-card>
    12. </li>
    13. </ul>
    14. </div>

     数据定义:

    1. data() {
    2. return {
    3. headertabs:[ //将headerList中flag为true的放在这里
    4. {name:"总客户数",tatol:8,class:"el-icon-user",flag:true},
    5. {name:"总车辆",tatol:120,class:"el-icon-truck",flag:true},
    6. {name:"在线车辆",tatol:12,class:"el-icon-data-line",flag:true},
    7. {name:"主动安全",tatol:120,class:"el-icon-setting",flag:true},
    8. {name:"本月新增车辆",tatol:0,class:"el-icon-date",flag:true},
    9. {name:"今日报警",tatol:0,class:"el-icon-time",flag:true},
    10. {name:"未处理报警",tatol:0,class:"el-icon-close-notification",flag:true},
    11. {name:"今日行驶里程",tatol:10000,class:"el-icon-odometer",flag:true},
    12. ],
    13. headerList:[
    14. {name:"总客户数",tatol:8,class:"el-icon-user",flag:true},
    15. {name:"总车辆",tatol:120,class:"el-icon-truck",flag:true},
    16. {name:"在线车辆",tatol:12,class:"el-icon-data-line",flag:true},
    17. {name:"主动安全",tatol:120,class:"el-icon-setting",flag:true},
    18. {name:"本月新增车辆",tatol:0,class:"el-icon-date",flag:true},
    19. {name:"今日报警",tatol:0,class:"el-icon-time",flag:true},
    20. {name:"未处理报警",tatol:0,class:"el-icon-close-notification",flag:true},
    21. {name:"今日行驶里程",tatol:10000,class:"el-icon-odometer",flag:true},
    22. {name:"视频车辆",tatol:0,class:"el-icon-video-camera",flag:false}
    23. ],
    24. };
    25. },

    js处理:

    1. methods: {
    2. setClass(val){
    3. switch (val.length) {
    4. case 1:
    5. return "one";
    6. break;
    7. case 2:
    8. return "two";
    9. break;
    10. case 3:
    11. return "three";
    12. break;
    13. case 4:
    14. return "four";
    15. break;
    16. case 5:
    17. return "five";
    18. break;
    19. case 6:
    20. return "six";
    21. break;
    22. case 7:
    23. return "seven";
    24. break;
    25. case 8:
    26. return "eight";
    27. break;
    28. case 9:
    29. return "nine";
    30. break;
    31. default:
    32. break;
    33. }
    34. }
    35. },

    css部分:

    1. <style scoped lang="scss">
    2. .header_tabs{
    3. width:100%;height:100px;padding:0 12px;
    4. }
    5. .header_tabs ul{
    6. width: 100%;
    7. height: 100%;
    8. }
    9. .one{
    10. width:100%;height:100%;
    11. }
    12. .two{
    13. width:49.5%;height:100%;float:left;margin-right: 1%;
    14. }
    15. .two:last-child{
    16. margin-right:0
    17. }
    18. .three{
    19. width:32.66%;height:100%;float:left;margin-right: 1%;
    20. }
    21. .three:last-child{
    22. margin-right:0
    23. }
    24. .four{
    25. width:24.25%;height:100%;float:left;margin-right: 1%;
    26. }
    27. .four:last-child{
    28. margin-right:0
    29. }
    30. .five{
    31. width:19.2%;height:100%;float:left;margin-right: 1%;
    32. }
    33. .five:last-child{
    34. margin-right:0
    35. }
    36. .six{
    37. width:15.83%;height:100%;float:left;margin-right: 1%;
    38. }
    39. .six:last-child{
    40. margin-right:0
    41. }
    42. .seven{
    43. width:13.42%;height:100%;float:left;margin-right: 1%;
    44. }
    45. .seven:last-child{
    46. margin-right:0
    47. }
    48. .eight{
    49. width:11.62%;height:100%;float:left;margin-right: 1%;
    50. }
    51. .eight:last-child{
    52. margin-right:0
    53. }
    54. .nine{
    55. width:10.22%;height:100%;float:left;margin-right: 1%;
    56. }
    57. .nine:last-child{
    58. margin-right:0
    59. }
    60. </style>

    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/871921
    推荐阅读
    • articlePostgresql数据库账户及linux账户(posgres)修改密码_postgres 修改密码...
      Postgresql数据库账户及linux账户(posgres)修改密码_postgres 修改密码postgres 修...

      赞

      踩

    • article谷粒商城 基础增删改(前端)_谷粒商城前端源码...
      这里的表单复用增加的表单,区别在于调用方法的不同,完全可以可以通过一个函数根据一个全局变量dialogType来判断调用...

      赞

      踩

    • articleFL Studio最新20.9中文豪华顶配购买指南_购买fl studio豪华版是自己安装合成器还是...
      FL Studio最新20.9中文豪华顶配购买指南_购买fl studio豪华版是自己安装合成器还是购买fl studi...

      赞

      踩

    • article分享57个Python源码,总有一款适合您_python办公自动化源代码下载...
      分享57个Python源码,总有一款适合您_python办公自动化源代码下载python办公自动化源代码下载 ...

      赞

      踩

    • articlewoocommerce产品选项卡描述_跨境电商独立站Woocommerce商店如何设置...
      什么是Woocommerce?Woocommerce是一个免费的wordpress插件,woocommerce在全球大约...

      赞

      踩

    • articlefl studio2024网盘下载详细安装包下载教程_flstudio下载百度网盘...
      fl studio2024全称Fruity Loops Studio2024,这款软件也被人们亲切的称之为水果,它是一款...

      赞

      踩

    • article第二章.外包银行面试-ZRGJ_银行外包面试题...
      外包银行面试题_银行外包面试题银行外包面试题 Java面...

      赞

      踩

    • articlepython编程金典读书笔记_《Python编程金典》读书笔记下(ZZ)...
      单线程程序问题在于要在结束费时较长的操作后,才能开始其它操作。而在多线程程序中,线程可共享一个或多个处理器,使多个任务并...

      赞

      踩

    • articleMac 安装 MySQL 8.0_mysql 8苹果下载...
      本文详细介绍了在Mac上安装MySQL 8.0的步骤,包括从官网下载安装包并完成安装,通过系统偏好设置查看安装状态,以及...

      赞

      踩

    • article如何在 WooCommerce 中设置分期付款...
      Affirm Payments 是最好的 WooCommerce 插件,用于设置分期付款。它提供多种付款方式,允许您添加...

      赞

      踩

    • articleFluentular-a Fluentd regular expression editor_flu...
      http://fluentular.herokuapp.com/_fluent expression editorflu...

      赞

      踩

    • articleOracle Client安装报错:[ins-13001] 环境不满足最低要求;引用数据不可用于验证...
      [ins-13001] 环境不满足最低要求:打开Oracle Client 11g安装包目录:\client\stage...

      赞

      踩

    • articlepython系列14:python中的视频处理_python 利用多核处理视频...
      1. moviepymoviepy包是一个可以用于处理视频的很有用的库,由于国内资料比较少,在此做一个记录。首先,需要导...

      赞

      踩

    • articlecocos2d-x lua中实现异步加载纹理_lua 中如何异步加载资源...
      最近项目中需要做一个loading个界面,界面_lua 中如何异步加载资源lua 中如何异步加载资源 ...

      赞

      踩

    • article可用的微信小程序抓包方式(Charles + bp)_charles抓包微信小程序...
      接到对公司小程序进行渗透的任务,尝试了网上几种对小程序抓包的方式(Burp+Proxifier、Burp+安卓模拟器等)...

      赞

      踩

    • articleSQL临时表的创建+查询_sql 建立临时表 并夺标查询...
      转自:http://www.cnblogs.com/yugen/archive/2010/07/25/1784749.h...

      赞

      踩

    • article软件测试行业前景怎么样_软件测试行业发展前景...
      软件测试工程师工作好找,但是企业有时却很难招聘到合适的软件测试工程师,这是因为现在企业需要的是自动化测试人才和测试开发人...

      赞

      踩

    • article【华为机试真题 JAVA】快速人名查找-200...
      给一个字符串,表示用','分开的人名。然后给定一个字符串,进行快速人名查找,符合要求的输出。快速人名查找要求︰人名的每个...

      赞

      踩

    • articlemysql中存储过程 使用if else 判断_mysql存储过程if else语句...
      BEGIN declare phonenum VARCHAR(32) ; SELECT phonenumber INT...

      赞

      踩

    • articleLinux系列——VMware虚拟机配置端口转发(端口映射),实现远程访问_vmware nat端口...
      前言本文所写的远程为各个电脑在同一个网段内本文主要详细介绍如何远程访问虚拟机里面的项目!机器:虚拟机(装在电脑1里)、电...

      赞

      踩

    相关标签
    • 数据库
    • linux
    • postgresql
    • ubuntu
    • 前端
    • javascript
    • ui
    • 软件开发
    • php
    • python
    • 开发语言
    • woocommerce产品选项卡描述
    • woocommerce产品选项描述修改
    • wordpress 可以添加woocommerce的分类到导航吗
    • android
    • macos
    • 面试
    • java
    • 经验分享
    • python编程金典读书笔记
    • mac
    • mysql
    • fluentd
    • kubernetes

    Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

      

    闽ICP备14008679号