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

效果图

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);
}

原文地址:https://www.cnblogs.com/wgl0126/p/10874816.html

时间: 2024-10-10 23:14:02

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

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效 Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了. 理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行. 原因 问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,

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

<foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')->select())->display(); <dl class='paper a{:mt_rand(1,5)}'>//生成随机数 <dt>{$a} <span class='username'>{$v.username}</span> <sp

dede循环出二级栏目及对应的三级栏目

{dede:channelartlist typeid=3 } <dd> <dl> <dt><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></dt> <dd> <ul> {dede:sql sql='Select * from `dede_arctype` where reid=~id~ ORD

ecshop教程之如何循环出1、2、3、4等数字的方法

例子: <!--{foreach from=$best_goods item=goods name=goods}--> {$smarty.foreach.goods.iteration} <!--{/foreach}--> ecshop教程之如何循环出1.2.3.4等数字的方法

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

Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论 这篇文章主要介绍了Vue中用props给data赋初始值遇到的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象

在 vue 中用 transition 实现轮播效果

概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对其他人也有用. 参考资料:进入/离开 & 列表过渡 transition 我从官网扒了一个示例的源码,如下所示: <div id="no-mode-demo" class="demo"> <transition name="no-mo

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

一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. 解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false.这时候使用autoplay开启自动播放是可以的, 然而当加上loop让其循环播放时,会发现是有

如何过滤出已知当前目录下oldboy中的所有一级目录

第1章 linux启动过程 1.1 linux启动过程(1) 开机自检(BIOS)内存cup是否有问题(硬件检查)(2) MBR引导(3) GRUB菜单(选择不同的内核)(4) 加载内核(kernel)(5) 运行init进程(linux里面的第一个进程,初始化过程)(6) 读取/etc/inittab配置文件(运行级别配置文件)(7) 执行/etc/rc.d/rc.sysinit脚本(系统初始化脚本,设置主机名,设置IP地址)(8) 执行/etc/rc.d/rc脚本(根据系统的云心级别,再开机

使用for循环创建在指定目录下批量创建文件并重命名所有文件

要求1: 使用for循环在/root/scripts/practice/q1/oldboy 目录下创建十个文件.名称依次为: oldboy-1, oldboy-2, ..... oldboy-10. 脚本实现: #!/bin/bash #Question1 shopt -s expand_aliases alias ll="ls -l" cd /root/scripts/practice/q1 #首先判断目录是否存在,不存在则创建目录 if [ ! -e oldboy ] then