效果图

1.html

<div>
<div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave="hiddenDetail($event)"
v-for="(item, index) in sectionDiagram"
:style="{height: item.height, left: item.sqrareLeft + 'px', width: item.width + 'px',zIndex: 88 + index}"
:key='index' class="middleBoxBgmSquare"
:class="square(item.passState)">
<span class="titleClass" >{{item.name}}</span>
</div>
</div>

2.让span居中,外层div的position:relative

.titleClass{
position: absolute;
top: -27px;
color: #fff;
font-size: 18px;
word-break: keep-all;
white-space: nowrap;
display: inline-block;
text-align: center;
left: 50%;
transform: translate(-50%,0);
}

vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中的更多相关文章

  1. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  2. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  3. ThinkPhp循环出数据库中的内容并输出到模板

    <foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')- ...

  4. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  5. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  6. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  7. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

  8. swiper在vue项目中的循环轮播bug以及点击事件

    一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...

  9. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

随机推荐

  1. 数学 找规律 Jzzhu and Sequences

    A - Jzzhu and Sequences   Jzzhu has invented a kind of sequences, they meet the following property: ...

  2. Spring MVC 入门(二)

    前言 上一篇讲到了 Spring MVC 的基本请求处理流程,本篇主要说一说如何使用 Spring MVC 来构建一个简单例子. 大致步骤如下 1.新建项目 2.导入相应 jar 包 (Spring ...

  3. 【ODPS】阿里云ODPS中带分区的表操作

    1.创建分区表: 分区表有自己的分区列,而分区表则没有. public static void createTableWithPartition(Odps odps, String createTab ...

  4. mysql数据类型和Java数据类型对比一览

    MySQL Types to Java Types for ResultSet.getObject() MySQL Type Name Return value ofGetColumnClassNam ...

  5. Hypercall

    在Linux中.大家应该对syscall很的了解和熟悉,其是用户态进入内核态的一种途径或者说是一种方式.完毕了两个模式之间的切换:而在虚拟环境中,有没有一种类似于syscall这样的方式.可以从no ...

  6. SQL Server 2005数据库定期备份(非常详细)与 SQL Server 2005数据库备份定期清理

     SQL Server 2005数据库定期备份 分类: SQL Server 20052011-01-06 16:25 3320人阅读 评论(1) 收藏 举报 sql server数据库sqlserv ...

  7. [BZOJ 1741] Asteroids

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1741 [算法] 将每颗小行星的行,列相连,问题就转化为了求这张图的最小覆盖 由kon ...

  8. Colored Sticks(trie)

    http://poj.org/problem?id=2513 题意:给一些木棒,木棒两端图上颜色,将端点颜色相同的木棒连在一起,问是否能连成一条直线. 思路:将两端的颜色看成点,将木棒看成边,判断是否 ...

  9. Springboot统一跨域配置

    前言:跨域是什么? 要知道跨域的概念,我们先明确怎样算是同一个域: 同一个域指的是同一协议,同一ip,同一端口 如果这三同中有一者不同就产生了跨域. 在做前后端分离的项目中,通过ajax请求后台端口时 ...

  10. BZOJ 3679 数位DP

    思路: f[i][j]表示i位数乘积为j的方案数 j的取值最多5000多种,那就开个map存一下好了 f[i][mp[k*rec[j]]]+=f[i-1][j]; //By SiriusRen #in ...