当前位置: 首页 > 编程笔记 >

Vue动态获取width的方法

阳念
2023-03-14
本文向大家介绍Vue动态获取width的方法,包括了Vue动态获取width的方法的使用技巧和注意事项,需要的朋友参考一下

vue里想用Bootstrap的进度条,

<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
  style="width: 20%;">
 <span class="sr-only">20%</span>
 </div>
</div>

主要是把style="width: 20%;"变成动态获取的。

:style="'width:' + percent + '%'"

这样写就好了。

也可是这样:

用vue 获取动态元素的宽度。首页,要放在this.$nextTick里面,其实要使用$el挂载此元素,下面贴代码吧:

<el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"></el-input>

先定义一个ref=companyStyle,我们来获取此元素的宽度,

newAddBtn(){
 let me = this;
 this.$nextTick(function () {
  me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px';
 
 })

这样我们就获取到了这个元素的宽度了。

以上这篇Vue动态获取width的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 目前正在使用引导vue。我需要生成,但是使用从api获得的动态头值,我不确定如何执行此操作。 我已经尝试了在数据中设置字段的常规方法,但若我尝试设置计算字段,我的表中并没有得到任何值` ` 是从包含如下数组的api接收的数据。此外,此阵列还可以添加更多次(来自api的数据)` ` 预期的结果是,我从api中获得了带有时间的列标题,并添加了日期列。 我可以使用时刻生成一系列的日期,但不确定如何将此映

  • 单条 GET /feeds/:feed Response Status: 201 OK { "id": 13, "created_at": "2017-06-21 01:54:52", "updated_at": "2017-06-21 01:54:52", "deleted_at": null, "user_id": 1, // 发布动态的用户 "feed_conte

  • 本文向大家介绍js动态获取时间的方法分析,包括了js动态获取时间的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js动态获取时间的方法。分享给大家供大家参考,具体如下: 为解决访问该页面出现 "一闪",才出现时间,应当在现在容器(id为showtimes的层)里先调用一次show_cur_times函数; 运行效果: 感兴趣的朋友可以使用在线HTML/CSS/JavaScript

  • 本文向大家介绍Layer弹出层动态获取数据的方法,包括了Layer弹出层动态获取数据的方法的使用技巧和注意事项,需要的朋友参考一下 前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能

  • 本文向大家介绍Vue 获取数组键名的方法,包括了Vue 获取数组键名的方法的使用技巧和注意事项,需要的朋友参考一下 json 数组结构如下 想要获取 “教程” 这两个字作为标题,.vue中方法如下 其中的sMain是父级传下来的数组 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍ajax动态获取数据库中的数据方法,包括了ajax动态获取数据库中的数据方法的使用技巧和注意事项,需要的朋友参考一下 今天看到有人在问答上问怎样去动态取值附在option上,本来想解决的,但我发现。。。。没有,我本来也笨,记不住,所以还是写一下,让大家可以看一下: 首先我这用的框架是SSM,代码就开始了: 这是写在前台的方法里一个点击事件进入方法里我就不写那么麻烦了直接ajax部分代