vue style中动态计算宽度

最新推荐文章于 2024-05-15 00:45:57 发布
最新推荐文章于 2024-05-15 00:45:57 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： vue常见问题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmmboy1990/article/details/121075311
版权

vue style中动态计算宽度

<span class="jdt-text4" :style="{width:`${0.963*item.progress}rem`}"></span>
cmmboy1990
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue如何动态获取元素的宽width和高height
weixin_48082725的博客
06-01 3709
vue的自定义指令directive自动计算宽度和高度变化 Vue.directive('resize',{ // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el);
vue element 中的table动态渲染实现（动态表头）
10-15
本文将深入探讨如何在Vue Element环境中实现表格的动态渲染，特别是动态表头的功能。 首先，动态渲染的核心在于能够根据不同的数据源自动生成对应的表格结构。在Element UI的`el-table`组件中，我们可以通过`v-for`...
vue 获取元素高度
xqhys的博客
09-18 4294
1、html <div ref="getheight"></div> <br><br> 2、JavaScript // 获取高度值 （内容高+padding+边框） letheight=this.$refs.getheight.offsetHeight; // 获取元素样式值 （存在单位） letheight = window....
Vue项目：style样式篇
最新发布
2401_84152928的博客
05-15 485
class=" { ‘classA’ : f，‘classB’：g } " //条件f成立则使用style标签中定义好的classA样式，条件g成立则使用classB样式。特别是对第三方组件样式的修改，想修改第三方组件的样式，又不想去掉scoped属性，影响别的组件。//自定义.css的样式路径。很多时候，我们希望样式只在当前组件生效，样式可以私有化，避免影响其他的组件，造成全局的样式污染。在style标签中添加scoped属性，可以使样式只在当前的组件中生效，样式私有化。/*引入公共样式*/
vue使用‘:style‘控制动态width样式!
TangMonk的博客
08-11 968
【代码】vue使用‘:style‘控制动态width样式!
JS+style实现动态设置图片高宽
仗见天涯...
06-12 8648
function resizeIMG(){var objImg = document.getElementById("pictureID");//pictureID是图片ID号var img_w = objImg.width;var img_h = objImg.height;var w=parseInt(img_w);var h=parseInt(img_h);//默认图片最宽400
Vue动态绑样式
qq_45623378的博客
08-31 2633
vue动态绑定Style
Vue动态获取width的方法
12-29
vue里想用Bootstrap的进度条， aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 xss=removed> <span class=sr-only>20% 主要是把style=”width: 20%;”变成动态获取的。 :style='width:' + perce
Vue登录主页动态背景短视频制作
10-16
在本文中，我们将探讨如何在Vue项目中创建一个登录主页，该主页具有动态背景短视频的效果。这个功能可以提升用户体验，使登录页面更加生动和吸引人。 首先，我们需要在HTML部分设置`<video>`标签来嵌入动态背景视频...
使用Vue开发动态刷新Echarts组件的教程详解
08-27
computed 中定义了一个 style 属性，用于计算组件的高度和宽度。methods 中定义了一个 init 方法，用于初始化 Echarts 实例。 三、渲染 Echarts 图表 在 mounted 生命周期钩子函数中，调用 init 方法，初始化 ...
Vue项目中动态修改元素宽高的三种方式
06-21 1万+
一般用于父组件动态变换宽高,子组件需要同步修改宽高，我这里是用在了一个ElementUi弹窗上面，当页面大小发生变化后，动态修改弹窗的大小，我试着通过deep函数修改el-dialog__body的高度，但是不好用，因为我的style上面加了scoped，但是呢，在el-dialog__body的div上却没有data的hash值绑定，所以导致样式不生效，所以要把style的scoped属性去掉才可以：具体动态修改元素宽高的方法，大概有三种方式。
vue动态添加style的样式
小太阳的博客
04-20 4378
vue在动态添加style样式的时候，有以下注意点 1.凡是有-的style属性名都要变成驼峰式，比如font-weight,需要写成fontWeight 2.除了绑定值，其他属性名的值要用引号括起来，比如width：‘75px’,不要忘记引号 3.动态绑定时，属性值和属性名要用大括号括起来。 【对象】 :style="{width: activeWidth, fontSize: fontSize...
Vue中获取元素的宽高
热门推荐
ilovexiaoming1的博客
12-25 2万+
一、获取元素 1、this.$refs 2、document.querySelector() document.getElementById() document.getElementByTagName()等等 确保获取到的元素不是undefined或null vue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。 二、获取元素的宽高 1、如果是内嵌样式style="width:100px,height:10..
vue 动态拼接style_vue style width a href动态拼接问题的解决
weixin_39628160的博客
12-20 686
style width 这个问题 折磨了我一个上午了 好惭愧因为项目涉及到 进度条 所以必须用行内样式 style用过vue的都知道 vue中style的用法大众用法：style=" { width:30px } "但是现在涉及到拼接了 直接上代码了其中list是我data循环的数据 这是一个比例的关系公开是拼接的时候 一直是报错的 一直出现文本 ‘ } " = > 类似这些的东西很显然 是...
vue根据字体长度设置对应宽
m0_64207574的博客
08-02 1458
vue根据字体长度设置对应宽
VUE项目中CSS设置动态宽度的方法
qq_43437571的博客
07-15 1万+
网上找到三种方法： 一、使用cumputed 首先你务必看Vue的官方文档。涉及到的基础知识有： 绑定内联样式的使用 computed的使用 文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案： 需求场景：获取当前手机屏幕高度，设置container div的可滚动区域范围。 step1: 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"></div> step2: 添加
CSS 自动宽度设置
℡メ㏑╭ァ小凯
07-05 1549
常规布局 效果，模块向左排列 给第一个text标签加一个：style="flex:1" 样式，就会变成自动宽度
vue 动态style 拼接宽度
qq_30872253的博客
11-27 4812
大众用法： ：style=" { width:30px } " 拼接宽度以及其他
动态style使用calc计算宽度
qq_52850749的博客
03-21 441
【代码】动态style使用calc计算宽度。
vue实现动态计算宽度
05-13
在Vue中实现动态计算宽度可以使用 `ref` 来获取到对应元素的DOM对象，然后通过 `offsetWidth` 属性来获取元素的实际宽度，最后将宽度动态绑定到元素的 `style` 属性中即可。 例如，假设有一个动态生成的菜单列表，每个菜单项的宽度不一定相同，我们可以在模板中为每个菜单项添加一个 `ref` 属性，然后在 `mounted` 钩子函数中通过 `this.$refs` 获取到每个菜单项的DOM对象，计算它们的实际宽度并保存到一个数组中，最后将这个数组绑定到菜单列表的 `style` 属性中，实现动态计算宽度。 具体代码如下： ``` <template> <div class="menu" :style="{width: menuWidth + 'px'}"> <div v-for="(item, index) in menuList" :key="index" :ref="'menuItem' + index" class="menu-item">{{ item }}</div> </div> </template> <script> export default { data() { return { menuList: ['Home', 'Products', 'About', 'Contact'], menuItemWidths: [] } }, computed: { menuWidth() { return this.menuItemWidths.reduce((total, width) => total + width, 0) } }, mounted() { this.menuItemWidths = this.menuList.map((item, index) => { return this.$refs['menuItem' + index][0].offsetWidth }) } } </script> ``` 在上面的代码中，我们通过 `map` 函数遍历菜单列表，获取到每个菜单项的DOM对象，然后通过 `offsetWidth` 属性获取它们的实际宽度，最后将宽度保存到 `menuItemWidths` 数组中。然后在 `menuWidth` 计算属性中，我们使用 `reduce` 函数将所有菜单项的宽度相加得到菜单的总宽度，最后将这个宽度绑定到菜单列表的 `style` 属性中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值