Vue动态获取width的方法

更新时间：2018年08月22日 11:08:58 作者：zxzxdw

今天小编就为大家分享一篇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
width

详解Vue3 SFC 和 TSX 方式调用子组件中的函数
在使用 .vue 定义的组件中，setup 中提供了 defineExpose() 方法，该方法可以将组件内部的方法暴露给父组件，这篇文章主要介绍了Vue3 SFC 和 TSX 方式调用子组件中的函数,需要的朋友可以参考下
2022-10-10
让ChatGPT解读Vue3源码过程解析
这篇文章主要为大家介绍了让ChatGPT解读Vue3源码过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue恢复初始数据this.$data,this.$options.data()解析
这篇文章主要介绍了vue恢复初始数据this.$data，this.$options.data()解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue中datepicker的使用教程实例代码详解
这篇文章主要介绍了vue-datepicker的使用，本文通过实例代码大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue3+element-plus动态路由菜单示例代码
这篇文章主要介绍了vue3+element-plus动态路由菜单示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue 指定组件缓存实例详解
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下
2018-04-04
深入了解vue-loader是如何工作的
这篇文章主要为大家详细介绍了vue-loader的工作原理与使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
Node.js path模块,获取文件后缀名操作
这篇文章主要介绍了Node.js path模块,获取文件后缀名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
element-ui 文件上传修改文件名的方法示例
这篇文章主要介绍了element-ui 文件上传修改文件名的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
详解vue-Resource（与后端数据交互）
本篇文章主要介绍了vue-Resource（与后端数据交互），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01